手册
目录
收藏932
分享
阅读2651
更新时间2025-07-16
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
visible - 默认。溢出没有被剪裁。内容在元素框外渲染hidden - 溢出被剪裁，其余内容将不可见scroll - 溢出被剪裁，同时添加滚动条以查看其余内容auto - 与 scroll 类似，但仅在必要时添加滚动条注释：overflow 属性仅适用于具有指定高度的块元素。
注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。
默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：
div {
overflow: hidden;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：
div {
overflow: scroll;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
auto 值类似于 scroll，但是它仅在必要时添加滚动条：
div {
overflow: auto;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
overflow-x 指定如何处理内容的左/右边缘。overflow-y 指定如何处理内容的上/下边缘。
div {
overflow-x: hidden; /* 隐藏水平滚动栏 */
overflow-y: scroll; /* 添加垂直滚动栏 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 |
|---|---|
| overflow | 规定如果内容溢出元素框会发生什么情况。 |
| overflow-x | 规定在元素的内容区域溢出时如何处理内容的左/右边缘。 |
| overflow-y | 指定在元素的内容区域溢出时如何处理内容的上/下边缘。 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习
