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 属性仅对具有指定高度的块级元素有效。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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 Overflow
CSS 教程：CSS 定位
HTML DOM 参考： overflow 属性
