overflow 属性指定当内容溢出其块级容器时,是否剪辑内容,显示滚动条或显示溢出的内容。

 

/* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

使用 overflow 默认值(visible)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交,它会强制(重新)包围内容元素。这种行为(重新包围内容元素)会在每一次移动滚动条之后发生,会使得滚动体验变差(慢)。

为使 overflow 有效果,块级容器必须有一个指定的高度(height或者max-height)或者将white-space设置为nowrap。

注意: 当相关HTML元素被设置为 scrollTop 时,即使 overflow 值为 hidden ,这个元素依旧会滚动 。

初始值visible
适用元素non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

 

visible
默认值。内容不会被修剪,会呈现在元素框之外。
hidden
内容会被修剪,并且其余内容是不可见的。
scroll
内容会被修剪,并且浏览器会使用滚动条,无论内容是否会被裁减。这避免了在动态环境中滚动条的出现和消失问题。打印机会打印溢出的内容。
auto
取决于用户代理。浏览器,例如火狐,会在内容溢出时提供滚动条。

Mozilla 扩展

-moz-scrollbars-none 
使用 overflow:hidden 代替.
-moz-scrollbars-horizontal 
推荐使用 overflow-xoverflow-y .
-moz-scrollbars-vertical 
推荐使用 overflow-xoverflow-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; /* 不显示滚动条 */  }
 

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

  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.

规范

规范 状态 注释
CSS Overflow Module Level 3
overflow
Working Draft  
CSS Basic Box Model
overflow
Working Draft 无变更
CSS Level 2 (Revision 1)
overflow
Recommendation 初始规定

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.

 

 

 

文档标签和贡献者

最后编辑者: StaicCai,