此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
overflow-x
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSS 属性overflow-x 设置当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用overflow 简写属性来设置该属性。
尝试一下
overflow-x: visible;overflow-x: hidden;overflow-x: clip;overflow-x: scroll;overflow-x: auto;<section> <div> 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;}语法
/* 关键字值 */overflow-x: visible;overflow-x: hidden;overflow-x: clip;overflow-x: scroll;overflow-x: auto;/* 全局值 */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溢出的内容不会被截断，且可以显示在元素边距（padding）框的左右边缘之外。元素盒子不是滚动容器。
hidden如有必要，溢出的内容会被截断以从水平方向适应元素的边距框，不会显示滚动条。
clip在溢出截断边缘（使用
overflow-clip-margin属性定义）上的溢出内容会被截断。即，距元素内边距框指定宽度（为overflow-clip-margin的<length>值，若未设置则为0px）范围内的内容会溢出。clip和hidden的区别是clip关键字还禁止所有滚动，包括程序性滚动（programmatic scrolling）。其不会创建新的格式化上下文。如果要创建新的格式化上下文，请将overflow: clip与display: flow-root一起使用。元素盒子不是滚动容器。scroll如有必要，溢出的内容会被截断以从水平方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。
auto元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与
scroll关键字值不同的是，用户代理只在内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与visible相同，但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。
备注：关键字值overlay 是auto 的一个遗留别名。使用overlay 时，滚动条会绘制在内容上方，而不占用空间。
形式定义
| 初始值 | visible |
|---|---|
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified, except withvisible/clip computing toauto/hidden respectively if one ofoverflow-x oroverflow-y is neithervisible nor clip |
| 动画类型 | 离散值 |
形式语法
overflow-x =
visible|
hidden|
clip|
scroll|
auto
示例
HTML
<ul> <li> <code>overflow-block:hidden</code>——在盒外隐藏文本 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:scroll</code>——总是添加滚动条 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-x:visible</code>——必要时在盒外显示文本 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-x:auto</code>——在多数浏览器上等价于 <code>scroll</code> <div>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 |
|---|
| CSS Overflow Module Level 3 # overflow-properties |