overflow - CSS（层叠样式表）编辑

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-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-x和overflow-y都设置为相同的值。

注意: 在Firefox 63之前，这些值是反向的，第一个值应用于overflow-y，第二个值应用于overflow-x。Firefox 63更新了这个顺序，以匹配对规范的更改。此更改是为了匹配使用新逻辑属性overflow-block和overflow-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 [1]: 使用 overflow:hidden 代替.
-moz-scrollbars-horizontal [1]: 推荐使用 overflow-x 和 overflow-y .
-moz-scrollbars-vertical [1]: 推荐使用 overflow-x 和 overflow-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 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!

Desktop
Mobile

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。

overflow - CSS（层叠样式表）编辑

语法

值

Mozilla 扩展

形式语法

示例

规范

浏览器兼容性

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

overflow - CSS（层叠样式表） 编辑

语法

值

Mozilla 扩展

形式语法

示例

规范

浏览器兼容性

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

overflow - CSS（层叠样式表）编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。