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 July 2015.

CSS 属性 overflow-x 设置当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用 overflow 简写属性来设置该属性。

尝试一下

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
/* 关键字值 */
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 with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
动画类型离散值

形式语法

overflow-x = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

示例

HTML

html
<ul>
  <li>
    <code>overflow-block:hidden</code>——在盒外隐藏文本
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code>——必要时在盒外显示文本
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code>——在多数浏览器上等价于 <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;
}

结果

规范

Specification
CSS Overflow Module Level 3
# overflow-properties

浏览器兼容性

参见