overflow-x

overflow-x CSS 属性设置当内容超出块级元素的左右边缘时显示的内容。这可能是空白、滚动条或溢出内容。也可以使用 overflow 简写属性设置此属性。

试试看

语法

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

溢出内容不会被裁剪，并且可能在元素的填充框的左右边缘之外可见。元素框不是 滚动容器。

hidden

如果需要，溢出内容将被裁剪以水平地适合元素的填充框。不提供滚动条。

clip

溢出内容在元素的溢出裁剪边缘处被裁剪，该边缘使用 overflow-clip-margin 属性定义。因此，内容会溢出元素的填充框 <length> 值 overflow-clip-margin 或未设置时为 0px。clip 和 hidden 之间的区别在于 clip 关键字还禁止所有滚动，包括编程滚动。不会创建新的格式化上下文。要建立格式化上下文，请将 overflow: clip 与 display: flow-root 一起使用。元素框不是滚动容器。

scroll

如果需要，溢出内容将被裁剪以水平地适合元素的填充框。浏览器在水平方向显示滚动条，无论内容是否实际被裁剪。（这可以防止滚动条在内容发生变化时出现或消失。）打印机可能仍然打印溢出内容。

auto

溢出内容在元素的填充框处被裁剪，并且可以滚动溢出内容以显示。与 scroll 不同，用户代理仅在内容溢出时显示滚动条，默认情况下隐藏滚动条。如果内容适合元素的填充框，它看起来与 visible 相同，但仍然会建立一个新的块级格式化上下文。桌面浏览器在内容溢出时提供滚动条。

注意：关键字值 overlay 是 auto 的传统值别名。使用 overlay，滚动条会绘制在内容的顶部，而不是占用空间。

正式定义

初始值visible
应用于块级容器、Flex 容器和网格容器
继承否
计算值如指定，除非 overflow-x 或 overflow-y 都不为 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

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅