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
属性控件沿设备视口的横轴溢出,因此会左右滚动。
滚动方向的逻辑属性
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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">scroll-behavior
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
scroll-behavior
可让您选择启用由浏览器控制的元素滚动。这样,您就可以指定如何处理网页内导航(例如 .scrollTo()
)或链接。
这在与 prefers-reduced-motion 结合使用时尤为有用,可基于用户偏好设置指定滚动行为。
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
滚动行为
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
如果您先到达模态叠加层的结尾,然后继续滚动,并使叠加层后面的页面移动了,这就是滚动链接,或者冒出到父级滚动容器。借助 overscroll-behavior
属性,您可以防止溢出滚动泄漏到父级容器中(称为滚动链)。
检查您的理解情况
测试您对 overflow 的掌握情况
文字溢出和元素溢出是一样的吗?
overflow
属性接受 2 个关键字,第一个关键字用于哪个轴?
滚动条在显示并内嵌时占用框模型中的哪个空间?
overlay
模式下,滚动条会与内边距重叠;在 inline
模式下,滚动条会添加到内边距中。为了在嵌套的隐式滚动条中捕获滚动的额外动量,您会使用哪个属性?
scroll-behavior
scroll-hint
overscroll-behavior
contain
会限制滚动。scroll-padding
overscroll-effect