试一试
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
<section class="default-example" id="default-example">
<div id="example-element">
The value of Pi is 3.1415926535897932384626433832795029. The value of e is
2.7182818284590452353602874713526625.
</div>
</section>
#example-element {
width: 15em;
height: 9em;
border: medium dotted;
padding: 0.75em;
text-align: left;
}
语法
css
/* Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;
overflow-x 属性指定为单个 <overflow> 关键词值。
如果 overflow-y 为 hidden、scroll 或 auto，并且 overflow-x 属性为 visible（默认值），则该值将隐式计算为 auto。
值
visible-
溢出内容不会被剪裁，并且可能在元素的左右内边距框之外可见。元素框不是滚动容器。
-
如果需要，溢出内容会被剪裁以水平适应元素的内边距框。不提供滚动条。
clip-
溢出内容在元素的溢出剪裁边缘被剪裁，该边缘使用
overflow-clip-margin属性定义。因此，内容会溢出元素的内边距框，溢出量为overflow-clip-margin的<length>值，如果未设置则为0px。clip和hidden之间的区别在于，clip关键词也禁止所有滚动，包括程序化滚动。不会创建新的格式化上下文。要建立格式化上下文，请将overflow: clip与display: flow-root一起使用。元素框不是滚动容器。 scroll-
如果需要，溢出内容会被剪裁以水平适应元素的内边距框。无论内容是否实际被剪裁，浏览器都会在水平方向显示滚动条。（这可以防止滚动条在内容更改时出现或消失。）打印机仍然可以打印溢出内容。
auto-
溢出内容在元素的内边距框处被剪裁，溢出内容可以滚动到视图中。与
scroll不同，用户代理仅在内容溢出时显示滚动条，并默认隐藏滚动条。如果内容适合元素的内边距框，它看起来与visible相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。
备注： 关键字值 overlay 是 auto 的一个旧版别名。使用 overlay 时，滚动条会绘制在内容之上，而不是占用空间。
正式定义
| 初始值 | visible |
|---|---|
| 应用于 | 块容器、伸缩容器和网格容器 |
| 继承性 | 否 |
| 计算值 | 如指定，但如果 overflow-x 或 overflow-y 之一既不是 visible 也不是 clip，则 visible/clip 分别计算为 auto/hidden |
| 动画类型 | 离散 |
正式语法
overflow-x =
visible |
hidden |
clip |
scroll |
auto
示例
HTML
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 adds 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
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;
}
结果
规范
| 规范 |
|---|
| CSS 溢出模块第 3 级 # overflow-properties |
浏览器兼容性
加载中…