溢出 | 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 | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
