溢出-x | overflow-x
overflow-x
当一个块级元素的内容在水平方向发生溢出时,CSS属性overflow-x决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。
/* Content is not clipped */
overflow-x: visible;
/* Content is clipped, with no scrollbars */
overflow-x: hidden;
/* Content is clipped, with scrollbars */
overflow-x: scroll;
/* Let the browser decide */
overflow-x: auto;
/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;
初始值 | 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 |
语法
值
visible
内容不会被截断,且可以显示在内容盒之外。
正式语法
visible | hidden | scroll | auto
示例
HTML
<ul>
<li><code>overflow-x:hidden</code> — hides the text outside the box
<div id="div1">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:scroll</code> — always add a scrollbar
<div id="div2">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:visible</code> — displays the text outside the box if needed
<div id="div3">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code>
<div id="div4">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
</ul>
CSS
#div1, #div2, #div3, #div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Overflow Module Level 3The definition of 'overflow-x' in that specification. | Working Draft | |
CSS Basic Box ModelThe definition of 'overflow-x' in that specification. | Working Draft | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 3.5 (1.9.1) | 5.01 | 9.5 | 3.0 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | (Yes) | 1.0 (1.9.1) | (Yes) | (Yes) | (Yes) |