溢出式菜单

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 属性控件沿设备视口的横轴溢出，因此会左右滚动。

滚动方向的逻辑属性

浏览器支持

  • Chrome：不支持。 <ph type="x-smartling-placeholder">
  • Edge：不支持。 <ph type="x-smartling-placeholder">
  • Firefox：69。 <ph type="x-smartling-placeholder">
  • Safari：不支持。 <ph type="x-smartling-placeholder">

来源

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 属性给出一个视觉线索，表明该框现在可滚动。

在使用 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，滚动条会竞争空间。Box 模型模块对这种潜在的布局偏移来源进行了详细说明。

根滚动条与隐式滚动条

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

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

<ph type="x-smartling-placeholder">
</ph>
该视频展示了具有弹跳行为和新样式设置的根滚动条
（与没有增强型滚动行为的隐式滚动条滚动相比）。

scroll-behavior

浏览器支持

  • Chrome：61。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：36。 <ph type="x-smartling-placeholder">
  • Safari：15.4. <ph type="x-smartling-placeholder">

来源

scroll-behavior 可让您选择启用由浏览器控制的元素滚动。这样，您就可以指定如何处理网页内导航（例如 .scrollTo()）或链接。

这在与 prefers-reduced-motion 结合使用时尤为有用，可基于用户偏好设置指定滚动行为。

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

滚动行为

浏览器支持

  • Chrome：63。 <ph type="x-smartling-placeholder">
  • Edge：18。 <ph type="x-smartling-placeholder">
  • Firefox：59。 <ph type="x-smartling-placeholder">
  • Safari：16. <ph type="x-smartling-placeholder">

来源

如果您先到达模态叠加层的结尾，然后继续滚动，并使叠加层后面的页面移动了，这就是滚动链接，或者冒出到父级滚动容器。借助 overscroll-behavior 属性，您可以防止溢出滚动泄漏到父级容器中（称为滚动链）。

检查您的理解情况

测试您对 overflow 的掌握情况

文字溢出和元素溢出是一样的吗？

true
与元素溢出相比，文字溢出比较特殊。
false
文本溢出通常与内嵌溢出有关，而元素溢出则与块溢出有关。

overflow 属性接受 2 个关键字，第一个关键字用于哪个轴？

横向
🎉
类别
几乎总是，在传递两个简写值时，第一个值是水平的。

滚动条在显示并内嵌时占用框模型中的哪个空间？

内容框
再试一次！
内边距框
在 overlay 模式下，滚动条会与内边距重叠；在 inline 模式下，滚动条会添加到内边距中。
边框
再试一次！
边距框
再试一次！

为了在嵌套的隐式滚动条中捕获滚动的额外动量，您会使用哪个属性？

scroll-behavior
再试一次！
scroll-hint
再试一次！
overscroll-behavior
将此属性设置为 contain 会限制滚动。
scroll-padding
再试一次！
overscroll-effect
再试一次！

资源

《Smashing 》杂志在 CSS 中的溢出和数据损失