溢出式菜单

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;
}

使用溢出属性

在元素上设置溢出属性，以控制当其子元素需要的空间超出其可用空间时会发生的情况。这可能是有意为之，例如在 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 将是网站的默认值。这样可以确保内容绝不会在无意中隐藏，并遵循“永不隐藏内容”或“采用精确布局的安全布局”这一核心原则。

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 属性提供视觉提示，表明该框现在可滚动。

在 Using CSS to Enforce Accessibility 中，Adrian Roselli 演示了 CSS 如何帮助防止无障碍功能回归。例如，仅在使用正确的属性时启用滚动功能并添加焦点指示器。以下规则将仅在具有 tabindex、aria-labelledby 和 role 属性时使框可滚动。

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

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

框模型中的滚动条定位

滚动条会占用内边距框内的空间，如果为 inline（而非 overlaid），则可能会争夺空间。盒模型模块详细介绍了此可能导致布局偏移的原因。

根滚动条与隐式滚动条

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

要创建根滚动条，您可以使用“提升滚动条”功能，方法是将容器定位为固定位置，确保它覆盖整个视口，且 Z-index 显示在滚动条的顶部。如需体验根滚动条与嵌套的隐式滚动条的区别，请点击此处。

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 中的溢出和数据丢失”一文