溢出 | overflow

overflow

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

/* Content is not clipped */
overflow: visible;

/* Content is clipped, with no scrollbars */
overflow: hidden;

/* Content is clipped, with scrollbars */
overflow: scroll;

/* Let the browser decide */
overflow: auto;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

使用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
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该overflow属性被指定为从下面的值列表中选择的单个关键字。

值

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

Mozilla扩展

-moz-scrollbars-none 使用 overflow:hidden 代替.-moz-scrollbars-horizontal 推荐使用overflow-x和overflow-y.-moz-scrollbars-vertical 推荐使用overflow-x和overflow-y.-moz-hidden-unscrollable主要用于内部和主题。禁用方向键和鼠标滚轮来滚动XML跟元素以及<HTML>和<body>元素。

正式语法

visible | hidden | scroll | auto

示例

p {  
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /* content is not clipped */ 
}

visible （默认）

然而，向你解释如何谴责快乐和痛苦大赞这一切错误的想法。

p { overflow: hidden; /* no scrollbars are provided */ }

overflow: hidden

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

p { overflow: scroll; /* always show scrollbars */ }

overflow: scroll

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

p { overflow: auto; /* append scrollbars if necessary */ }

overflow: auto

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

规范

Specification	Status	Comment
CSS Overflow Module Level 3The definition of 'overflow' in that specification.	Working Draft
CSS Basic Box ModelThe definition of 'overflow' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'overflow' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)1	4.02	7.0	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	1.0 (1)1	?	?	?