这篇文章需要文法复核。如何帮忙。
概要
overflow 属性作用于block型元素上。它规定了当内容元素溢出元素框时发生的事：裁剪内容，使用滚动条来显示 或 直接显示超出部分 。
使用 overflow 默认值（visible）以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会强制（重新）包围内容元素。这种行为（重新包围内容元素）会在每一次移动滚动条之后发生，会使得滚动体验变差（慢）。
注意: 当相关HTML元素被设置为 scrollTop 时，即使 overflow 值为 hidden ，这个元素依旧会滚动 。
| 初始值 | visible |
|---|---|
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;
/* 规定从父元素继承overflow属性的值 */
overflow: inherit;值
visible- 默认值。内容不会被修剪，会呈现在元素框之外。
hidden- 内容会被修剪，并且其余内容是不可见的。
scroll- 内容会被修剪，并且浏览器会使用滚动条，无论内容什么内容被裁减。这避免了在动态环境中滚动条的出现和消失问题。打印机会打印溢出的内容。
auto- 取决于用户代理。浏览器，例如火狐，会在内容溢出时提供滚动条。
Mozilla 扩展
-moz-scrollbars-none- 使用
overflow:hidden代替. -moz-scrollbars-horizontal- 推荐使用
overflow-x和overflow-y. -moz-scrollbars-vertical- 推荐使用
overflow-x和overflow-y. - -moz-hidden-unscrollable
- 主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。
形式语法
visible | hidden | scroll | auto
示例
p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* 内容不会被修剪 */
}visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p{overflow: hidden;/* 不显示滚动条 */}
p{overflow: scroll;/* 始终显示滚动条 */}
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p{overflow: auto;/* 必要时显示滚动条 */}
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
详细描述
| Specification | Status | Comment |
|---|---|---|
| CSS Overflow Module Level 3 overflow |
Working Draft | |
| CSS Basic Box Model overflow |
Working Draft | No change. |
| CSS Level 2 (Revision 1) overflow |
Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier)[1] | 4.0[2] | 7.0 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 1.0 (1) | ? | ? | ? |
[1] Firefox 3.6 (Gecko 1.9.2)中, overflow 属性被错误地应用到表组元素（<thead>,<tbody>,<tfoot>）中。这个错误在之后的版本中被修复。
[2]Internet Explorer 4 － 6 会扩大一个带有overflow:visible 的元素以适应它的内容。此处 height/width 的作用相当于 min-height/min-width.