--- title: overflow slug: Web/CSS/overflow tags: - CSS - CSS Box Model - CSS Property - CSS_参考 - Layout - NeedsEditorialReview - NeedsTechnicalReview - NeedsUpdate - overflow - 'overflow: scroll;' translation_of: Web/CSS/overflow ---

{{ CSSRef() }}

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

{{EmbedInteractiveExample("pages/css/overflow.html")}}

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

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

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

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

注意: 即使将overflow设置为hidden，也可以使用JavaScript {{domxref("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 {{experimental_inline}} {{deprecated_inline}}
行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

Mozilla 扩展

-moz-scrollbars-none {{ obsolete_inline() }}[1]
使用 overflow:hidden 代替.
-moz-scrollbars-horizontal {{ Deprecated_inline() }}[1]
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
-moz-scrollbars-vertical {{ Deprecated_inline() }}[1]
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
-moz-hidden-unscrollable {{ non-standard_inline() }}
主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动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

形式语法

{{csssyntax}}

示例

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.

规范

规范 状态 注释
{{ SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow') }} {{ Spec2('CSS3 Overflow') }}
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }} {{ Spec2('CSS3 Box') }} 无变更
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }} {{ Spec2('CSS2.1') }} 初始规定

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }}[1] 4.0[2] 7.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 [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