overflow

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

overflow 是一个 CSS 简写属性，用以设定当内容无法适应元素的内边距（padding box）（即溢出）时，在水平和/或垂直方向上期望的行为。

试一试

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

语法

css

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

overflow 属性可指定为一个或两个 <overflow> 关键字值。如果只指定一个关键字，那么 overflow-x 和 overflow-y 都会被设置为相同的值。如果指定了两个关键字，第一个值应用于水平方向的 overflow-x，第二个值则应用于垂直方向的 overflow-y。

值

visible: 溢出的内容不会被裁剪，可能会在元素的内边距盒之外可见。元素盒不是一个滚动容器。这是 overflow 属性的默认值。
hidden: 溢出的内容在元素的内边距盒处被裁剪。没有滚动条，被裁剪的内容不可见（即内容被隐藏），但内容仍然存在。用户代理不会添加滚动条，也不允许用户通过诸如触摸屏拖拽或使用鼠标滚轮等操作来查看裁剪区域外的内容。内容可以通过编程方式滚动（例如，通过链接到锚文本、通过 Tab 键聚焦到隐藏但可聚焦的元素，或者通过设置 scrollLeft 属性或 scrollTo() 方法的值），在这种情况下，元素盒是一个滚动容器。
clip: 溢出的内容在元素的溢出裁剪边缘处被裁剪，该边缘通过 overflow-clip-margin 属性定义。因此，内容会溢出元素的内边距盒，溢出的量为 overflow-clip-margin 的 <length> 值，如果未设置则为 0px。裁剪区域外的溢出内容不可见，用户代理不会添加滚动条，也不支持编程方式的滚动。不会创建新的格式化上下文。要建立一个格式化上下文，请将 overflow: clip 与 display: flow-root 一起使用。元素盒不是一个滚动容器。
scroll: 溢出的内容在元素的内边距盒处被裁剪，并且可以使用滚动条将溢出的内容滚动到视图中。无论是否有内容溢出，用户代理都会显示滚动条，因此如果该值同时应用于水平和垂直方向，那么两个方向都会显示滚动条。因此，使用此关键字可以防止滚动条随着内容变化而出现和消失。打印机可能仍然会打印溢出的内容。元素盒是一个滚动容器。
auto: 溢出的内容在元素的内边距盒处被裁剪，并且可以使用滚动条将溢出的内容滚动到视图中。与 scroll 不同，用户代理仅当内容溢出时才显示滚动条。如果内容能适应元素的内边距盒，它的外观与 visible 相同，但仍然会建立一个新的格式化上下文。元素盒是一个滚动容器。

备注： 关键字值 overlay 是 auto 的一个旧版别名。使用 overlay 时，滚动条会绘制在内容之上，而不是占用空间。

描述

溢出选项包括隐藏溢出内容、启用滚动条以查看溢出内容、或显示内容从元素盒中流出到周围区域，以及这些选项的组合。

在使用 overflow 的各种关键字时，应注意以下细微差别：

为 overflow 指定一个非 visible（默认值）或 clip 的值会创建一个新的块格式化上下文。这是出于技术原因的需要；如果一个浮动元素与一个滚动元素相交，它会在每次滚动后强制重新包裹内容，从而导致滚动体验缓慢。
为了使 overflow 设置产生预期效果，块级元素必须具有：如果溢出发生在垂直方向，则需要设置高度（height 或 max-height）；如果溢出发生在水平方向，则需要设置宽度（width 或 max-width）；如果溢出发生在块方向，则需要设置块级尺寸（block-size 或 max-block-size）；或者，如果溢出发生在行内方向，则需要设置行内尺寸（inline-size 或 max-inline-size）或将 white-space 设置为 nowrap。
当一个方向（即 overflow-x 或 overflow-y）的 overflow 设置为 visible，而另一个方向的 overflow 未设置为 visible 或 clip 时，visible 值的行为会像 auto 一样。
当一个方向的 overflow 设置为 clip，而另一个方向的 overflow 未设置为 visible 或 clip 时，clip 值的行为会像 hidden 一样。
JavaScript 的 Element.scrollTop 属性可用于在滚动容器中滚动内容，除非 overflow 被设置为 clip。

正式定义

初始值	`visible`
应用于	块容器、伸缩容器和网格容器
继承性	否
计算值	作为简写中的每个属性 `overflow-x`：按指定值计算，但如果 `overflow-x` 或 `overflow-y` 中有一个既不是 `visible` 也不是 `clip`，那么 `visible`/`clip` 会分别计算为 `auto`/`hidden`。 `overflow-y`：按指定值计算，但如果 `overflow-x` 或 `overflow-y` 中有一个既不是 `visible` 也不是 `clip`，那么 `visible`/`clip` 会分别计算为 `auto`/`hidden`。
动画类型	离散

正式语法

overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

无障碍

滚动内容区域不是键盘可聚焦的，因此纯键盘用户无法滚动它。Firefox 和 Chrome 132 及更高版本是例外；它们默认使滚动容器可聚焦。

对于其他浏览器，要让纯键盘用户能够滚动容器，你需要使用 tabindex="0" 为容器分配一个 tabindex。不幸的是，当屏幕阅读器遇到这个制表位时，它可能没有关于该容器的上下文，并且很可能会读出容器的全部内容。为了缓解这个问题，请给容器一个适当的 WAI-ARIA 角色（例如 role="region"）和一个无障碍名称（通过 aria-label 或 aria-labelledby）。

示例

演示各种 overflow 关键字的结果

HTML

html

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

css

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

结果

规范

规范
CSS 溢出模块第 3 级 # propdef-overflow
Scalable Vector Graphics (SVG) 2 # OverflowAndClipProperties

浏览器兼容性

另见

overflow-x, overflow-y
overflow-block、overflow-clip-margin、overflow-inline
clip、display、text-overflow、white-space
SVG overflow 属性
CSS overflow 模块
adrianroselli.com 上的纯键盘滚动区域（2022 年）

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 7 月 14 日⁩，由 MDN 贡献者们共同完成。

在 GitHub 上查看此页面 • 报告此内容的问题