overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-xoverflow-y的 简写属性 

这个选项包含剪切,显示滚动条,或者显示 从容器溢出到周围区域的内容。

指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交,它会在每个滚动步骤后强行重新包装内容,从而导致慢滚动体验。

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

注意:  设置一个轴为visible(默认值),同时设置另一个轴为不同的值,会导致设置visible的轴的行为会变成auto。 

注意: 即使将overflow设置为hidden,也可以使用JavaScript Element.scrollTop 属性来滚动HTML元素。

语法

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

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

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

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

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

 从下面列表中选出一个或两个关键字来指定overflow 属性。如果指定了两个关键字,第一个关键字应用于overflow-x,第二个关键字应用于overflow-y。否则,overflow-xoverflow-y都设置为相同的值。

注意: 在Firefox 63之前,这些值是反向的,第一个值应用于overflow-y,第二个值应用于overflow-x。Firefox 63更新了这个顺序,以匹配对规范的更改。此更改是为了匹配使用新逻辑属性overflow-blockoverflow-inline时的顺序。

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: hidden scroll;
/* But on Firefox 63 and later, it will be */
overflow: scroll hidden;

visible
默认值。内容不会被修剪,可以呈现在元素框之外。
hidden
如果需要,内容将被剪裁以适合填充框。 不提供滚动条。
scroll
如果需要,内容将被剪裁以适合填充框。 浏览器显示滚动条,无论是否实际剪切了任何内容。 (这可以防止滚动条在内容更改时出现或消失。)打印机仍可能打印溢出的内容。
auto
取决于用户代理。 如果内容适合填充框内部,则它看起来与可见内容相同,但仍会建立新的块格式化上下文。 如果内容溢出,桌面浏览器会提供滚动条。
overlay 
行为与auto相同,但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit(例如,Safari)和基于Blink的(例如,Chrome或Opera)浏览器中受支持。

Mozilla 扩展

-moz-scrollbars-none  This is an obsolete API and is no longer guaranteed to work. [1]
使用 overflow:hidden 代替.
-moz-scrollbars-horizontal  [1]
推荐使用 overflow-xoverflow-y .
-moz-scrollbars-vertical  [1]
推荐使用 overflow-xoverflow-y .
-moz-hidden-unscrollable
主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。
[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set layout.css.overflow.moz-scrollbars.enabled to true

形式语法

[ visible | hidden | clip | scroll | auto ]{1,2}

示例

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 Box Model
overflow
Candidate Recommendation 无变更
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! (en-US)

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

See also