溢出

**overflow** CSS 简写属性设置当内容不适合元素的内边距框（溢出）时的所需行为，在水平和/或垂直方向。

语法

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: 溢出内容在元素的内边距框处被裁剪。没有滚动条，裁剪的内容不可见（即裁剪的内容隐藏），但内容仍然存在。用户代理不会添加滚动条，也不允许用户通过拖动触摸屏或使用鼠标滚轮等操作查看裁剪区域之外的内容。可以以编程方式滚动内容（例如，通过链接到锚文本，通过将标签切换到隐藏但可聚焦的元素，或者通过设置 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设置为visible（例如overflow-x或overflow-y），而在另一个方向上没有设置为visible或clip时，visible值的行为将等同于auto。
当在其中一个方向上将overflow设置为clip，而在另一个方向上没有设置为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 用户（默认情况下，Firefox 使容器可通过键盘获取焦点）。

作为开发者，若要允许非 Firefox 的仅使用键盘的用户滚动容器，你需要使用 tabindex="0" 为其添加 tabindex 属性。遗憾的是，当屏幕阅读器遇到此选项卡停止点时，它们将无法识别其用途，并且屏幕阅读器很可能宣布其所有内容。为其添加适当的 WAI-ARIA 角色（例如，role="region"）和可访问的名称（通过 aria-label 或 aria-labelledby）可以缓解这种情况。

示例

演示各种溢出关键字的结果

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

overflow-x, overflow-y
overflow-block, overflow-clip-margin, overflow-inline
clip, display, text-overflow, white-space
CSS 溢出
仅使用键盘滚动区域在 adrianroselli.com 上（2022 年）

溢出

试一试

构成属性

语法

值

描述