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
属性允许您防止溢出滚动泄漏到父容器(称为滚动链接)。
检查您的理解情况
测试您对溢出的知识
文本溢出和元素溢出是否相同?
overflow
属性接受 2 个关键字,第一个关键字用于哪个轴?
当显示和内联时,滚动条在盒模型中占用哪个空间?
overlay
模式下的滚动条将重叠内边距,而 inline
模式下的滚动条将添加到内边距。要捕获来自嵌套隐式滚动条的额外滚动惯性,您将使用哪个属性?
scroll-behavior
scroll-hint
overscroll-behavior
contain
将捕获滚动。scroll-padding
overscroll-effect