CSS overflow
**CSS overflow** 模块属性使您能够处理视觉媒体中的可滚动溢出。
溢出发生在元素框中的内容超出框的一个或多个边缘时。**可滚动溢出**是指出现在元素框之外的内容，您可能希望为其添加滚动机制。CSS 溢出属性使您可以控制当内容超出元素框时发生的事情。
超出内容但未参与 CSS 框模型的绘制效果不会影响布局。这种类型的溢出也被称为墨水溢出。墨水溢出的示例包括框阴影、边框图像、文本修饰、悬垂的字形和轮廓。墨水溢出不会扩展可滚动溢出区域。
溢出效果
使用以下交互式示例查看各种overflow 属性值对相邻固定大小框中的内容溢出和滚动条的影响。
该示例还包括选项来更改overflow-clip-margin 和width 属性的值，以及在overflow 属性创建滚动容器时以编程方式滚动内容。选择overflow: clip 并查看不同overflow-clip-margin 值的影响。选择overflow: hidden 或overflow: scroll 来查看各种ScrollLeft 和ScrollTop 滑块设置。
上面内容框中包含一个链接，以演示键盘焦点对溢出和滚动行为的影响。尝试使用 Tab 键切换到链接或以编程方式滚动内容：只有当枚举的<overflow> 值创建滚动容器时，内容才会滚动。
参考资料
CSS 属性
overflow简写overflow-blockoverflow-clip-marginoverflow-inlineoverflow-xoverflow-yscroll-behaviorscrollbar-guttertext-overflow-webkit-line-clamp
注意： CSS 溢出模块级别 4 引入了block-ellipsis、continue、line-clamp 和max-lines 属性。这些属性尚未实现。
数据类型
<overflow>枚举值
指南
- 溢出内容
-
CSS 构建块：了解什么是溢出以及如何管理它。
- 创建命名滚动进度时间线动画
-
CSS 滚动时间线
scroll-timeline-name和scroll-timeline-axis属性，以及scroll-timeline简写，创建与滚动容器的滚动偏移量绑定的动画。
相关概念
scrollbar-widthCSS 属性scrollbar-colorCSS 属性scrollbar-gutterCSS 属性scroll-behaviorCSS 属性scroll-marginCSS 简写属性scroll-paddingCSS 简写属性scroll-snap-alignCSS 属性scroll-snap-stopCSS 属性scroll-snap-typeCSS 属性text-overflowCSS 属性::-webkit-scrollbar伪元素scrollbarARIA 角色- 元素
scroll()方法 - 元素
scrollBy()方法 - 元素
scrollIntoView()方法 - 元素
scrollTo()方法 - 元素
scrollTop属性 - 元素
scrollLeft属性 - 元素
scrollWidth属性 - 元素
scrollHeight属性 - 文档
scroll事件 - 滚动容器 词汇表条目
- 墨水溢出 词汇表条目
规范
| 规范 |
|---|
| 未知规范 |
| 未知规范 |