Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

这篇文章需要文法复核。如何帮忙。

概要

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-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.

详细描述

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.

 

 

 

文档标签和贡献者

 此页面的贡献者: Ende93, zhe13, yfdyh000, Sebastianz, fscholz, FredWe, teoli, TigerSoldier
 最后编辑者: Ende93,