CSS overflow 属性
示例
显示不同的 overflow 属性值
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow: auto;
}
div.ex4 {
overflow: clip;
}
div.ex5 {
overflow: visible;
}
亲自试一试 »
定义和用法
overflow 属性指定如果内容溢出元素的框该怎么办。
此属性指定当元素的内容过大而无法容纳在指定区域中时，是否剪切内容或添加滚动条。
注意：overflow 属性仅适用于具有指定高度的块级元素。
| 默认值 | visible |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 了解有关可动画的信息 |
| 版本 | CSS2 |
| JavaScript 语法 | object.style.overflow="scroll" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
注意：在 OS X Lion（在 Mac 上），滚动条默认隐藏，仅在使用时显示（即使设置了“overflow:scroll”）。
CSS 语法
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| visible | 溢出不会被剪裁。它在元素框之外呈现。这是默认值 | 演示 ❯ |
| hidden | 溢出被剪裁，其余内容将不可见。内容可以通过编程方式滚动（例如，通过设置 scrollLeft 或 scrollTo()）。 | 演示 ❯ |
| clip | 溢出被剪裁，其余内容将不可见。禁止滚动，包括编程滚动。 | 演示 ❯ |
| scroll | 溢出被剪裁，但添加了滚动条以查看其余内容 | 演示 ❯ |
| auto | 如果溢出被剪裁，则应添加滚动条以查看其余内容 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解有关initial的信息 | |
| inherit | 从其父元素继承此属性。 了解有关inherit的信息 |
相关页面
CSS 教程：CSS 溢出
CSS 教程：CSS 定位
HTML DOM 参考：overflow 属性
