CSS参考手册
基本框模型 | Basic Box Model
溢出-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
内容不会被截断,且可以显示在内容盒之外。
hidden
内容会被截断,且不会显示滚动条。
scroll
桌面浏览器总是显示滚动条,无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
auto
取决于浏览器本身。当内容发生溢出时,桌面浏览器如Firefox会显示滚动条。
正式语法
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) |
基本框模型 | Basic Box Model相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。