溢出

使用集合保持井然有序 根据您的偏好保存内容并进行分类。

CSS 播客 - 034：溢出

当内容超出其父元素时，您可以通过多种选项来处理它。您可以滚动以添加额外空间、裁剪溢出的边缘、用省略号指示截断等等。在为手机应用程序和多种屏幕尺寸开发时，尤其需要考虑溢出。

CSS 中有两种不同的裁剪选项；text-overflow 将帮助处理单行文本，而 overflow 属性将帮助控制盒模型中的溢出。

使用 text-overflow 的单行溢出

在包含文本节点（例如段落 <p>）的任何元素上使用 text-overflow 属性。它指定了文本在不适合元素的可用空间时如何显示。页面上所有可见的 HTML 文本都在 文本节点 中。要使用 text-overflow，您需要单行未换行的文本，因此您还必须将 overflow 设置为 hidden，并具有阻止换行的 white-space 值。

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

使用 overflow 属性

Overflow 属性在元素上设置，以控制当其子元素需要的空间超出可用空间时会发生什么。这可能是故意的，例如在 Google 地图等交互式地图中，用户可以平移裁剪为特定尺寸的大图像。这也可能是无意的，例如在聊天应用程序中，用户键入的冗长消息不适合文本气泡。

您可以将溢出分为两部分来考虑。父元素具有不会更改的严格约束空间。您可以将其视为窗口。子元素是想要从父元素获得更多内容的内容。您可以将其视为您正在透过窗口看到的内容。管理溢出将有助于指导窗口如何构图此内容。

在垂直轴和水平轴上滚动

overflow-y 属性控制设备视口垂直轴上的物理溢出，因此是上下滚动。

overflow-x 属性控制设备视口水平轴上的溢出，因此是左右滚动。

滚动方向的逻辑属性

overflow-inline 和 overflow-block 属性根据文档方向和书写模式设置溢出。

overflow 简写

overflow 简写在一行中设置 overflow-x 和 overflow-y 样式

overflow: hidden scroll;

如果指定了两个关键字，则第一个应用于 overflow-x，第二个应用于 overflow-y。否则，overflow-x 和 overflow-y 都使用相同的值。

值

让我们仔细看看 overflow 属性可用的值和关键字。

overflow: visible（默认值）

在不设置属性的情况下，overflow: visible 是 Web 的默认值。这确保了内容永远不会被意外隐藏，并遵循“永不隐藏内容”或“精确布局的安全布局”的核心原则。

overflow: hidden

使用 overflow: hidden，内容会在指定方向上被裁剪，并且不提供滚动条来显示它。

overflow: scroll

overflow: scroll 启用滚动条以允许用户滚动浏览内容。即使内容当前未溢出，也会显示滚动条。如果容器将来可能会滚动（例如，基于调整大小），并且在视觉上为用户准备了可滚动区域，那么这是一种减少未来布局偏移的好方法。

overflow: clip

与 overflow: hidden 类似，使用 overflow: clip 的内容会被裁剪到元素的内边距框。 clip 和 hidden 之间的区别在于，clip 关键字还禁止所有滚动，包括程序化滚动。

overflow: auto

最后，最常用的值 overflow: auto。这尊重用户的偏好，并在需要时显示滚动条，但默认情况下会隐藏滚动条，并将滚动责任交给用户和浏览器。

滚动和溢出

许多 overflow 行为都会引入滚动条，但有一些特定的滚动行为和属性可以帮助您控制溢出容器上的滚动。

滚动和无障碍功能

重要的是要确保可滚动区域可以接受焦点，以便键盘用户可以 Tab 键切换到该框，然后使用箭头键滚动。

要允许滚动框接受焦点，请添加 tabindex="0"，使用 aria-labelledby 属性命名，以及适当的 role 属性。例如

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

然后可以使用 CSS 来指示该框已获得焦点，使用 outline 属性来提供视觉线索，表明它现在可以滚动。

在 使用 CSS 来强制执行无障碍功能 中，Adrian Roselli 演示了 CSS 如何帮助防止无障碍功能倒退。例如，仅当使用了正确的属性时才启用滚动并添加焦点指示器。以下规则仅当框具有 tabindex、aria-labelledby 和 role 属性时才会使其可滚动。

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

盒模型内的滚动条定位

滚动条占用内边距框内的空间，如果 inline 而不是 overlaid，则可能会争夺空间。 盒模型模块 更详细地介绍了这种潜在的布局偏移来源。

root-scroller 与 implicit-scroller

您可能会注意到，某些滚动条具有下拉刷新行为和其他特殊行为，尤其是在为移动和混合应用程序开发时。此滚动行为发生在根滚动条上。页面上始终只有一个根滚动条。默认情况下，documentElement 是页面的根滚动条，但是，通过更改哪个元素是根滚动条，特殊行为可以应用于 documentElement 以外的滚动条，我们将这个新滚动条称为隐式根滚动条。

要创建根滚动条，您可以使用称为滚动条提升的方法，方法是将容器定位为 fixed，确保它覆盖整个视口，并且 z-index 位于顶部并带有滚动条。在此处体验根滚动条与嵌套隐式滚动条 here。

scroll-behavior

scroll-behavior 允许您选择加入浏览器控制的元素滚动。这允许您指定如何处理页面内导航，例如 .scrollTo() 或链接。

当与 prefers-reduced-motion 一起使用以根据用户偏好指定滚动行为时，这尤其有用。

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

如果您曾经到达模态叠加层的末尾，然后继续滚动并让叠加层后面的页面移动，这就是滚动链接或冒泡到父滚动容器。 overscroll-behavior 属性允许您防止溢出滚动泄漏到父容器（称为滚动链接）。

检查您的理解情况

测试您对溢出的知识

资源

Smashing Magazine 的 CSS 中的溢出和数据丢失