1. Web
  2. CSS
  3. <overflow>

<overflow>

Baseline 广泛可用 *

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

* 此特性的某些部分可能存在不同级别的支持。

<overflow> 枚举值类型表示 overflow-block、overflow-inline、overflow-x 和 overflow-y 简写属性以及 overflow 简写属性的关键词值。这些属性应用于块容器、弹性容器和网格容器。

语法

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

值

<overflow> 枚举值类型使用下面列出的值之一来指定。

visible

溢出内容不会被裁剪，并且可能在元素的内边距框之外可见。元素框不是滚动容器。这是所有具有 <overflow> 枚举值类型的属性的默认值。

hidden

溢出内容在元素的内边距框处被裁剪。没有滚动条，被裁剪的内容不可见（即，被裁剪的内容被隐藏），但内容仍然存在。用户代理不添加滚动条，也不允许用户通过诸如在触摸屏上拖动或使用鼠标滚轮等操作来查看裁剪区域之外的内容。内容可以通过编程方式滚动（例如，通过设置 scrollLeft 属性的值或 scrollTo() 方法）。内容也可以通过键盘交互进行滚动；箭头键可以滚动内容，而通过 Tab 键聚焦到隐藏内容中的可聚焦元素可以使聚焦的元素滚动到视图中。设置此值的元素框是一个滚动容器。

clip

溢出内容在元素的溢出裁剪边缘处被裁剪，该边缘使用 overflow-clip-margin 属性定义。因此，内容超出元素的内边距框，超出量为 overflow-clip-margin 的 <length> 值，如果未设置则为 0px。裁剪区域之外的溢出内容不可见，用户代理不添加滚动条，也不支持编程滚动。不创建新的格式化上下文。

scroll

溢出内容在元素的内边距框处被裁剪，并且可以使用滚动条将溢出内容滚动到视图中。如果只设置一个值，无论是否有任何内容溢出或被裁剪，用户代理都会在水平和垂直方向上显示滚动条。因此，使用此关键词值可以防止滚动条在内容变化时出现和消失。打印机仍可能打印溢出内容。设置此值的元素框是一个滚动容器。

auto

溢出内容在元素的内边距框处被裁剪，并且溢出内容可以滚动到视图中。与 scroll 不同，用户代理仅在内容溢出时显示滚动条，并默认隐藏滚动条。如果内容适合元素的内边距框，它看起来与 visible 相同，但仍会建立新的格式化上下文。设置此值的元素框是一个滚动容器。

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

示例

此示例演示了 overflow 属性的所有 <overflow> 枚举值。

HTML

此示例中的 HTML 包含 <pre> 元素中的一些歌词。HTML 还包含一个链接文本，用于测试键盘焦点对溢出和滚动行为的影响。相同的 HTML 代码重复多次，以显示每个 <overflow> 枚举值的影响。

html
<pre>&nbsp;
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

CSS

为了演示目的，<pre> 元素框的大小已定义，以确保内容在行内和块方向上都溢出其容器。为每个重复的 <pre> 元素设置不同的 <overflow> 值。对于 clip 值的演示，已添加 overflow-clip-margin。

css
pre {
  block-size: 100px;
  inline-size: 295px;
}

pre:nth-of-type(1) {
  overflow: hidden;
}
pre:nth-of-type(1)::before {
  content: "hidden: ";
}

pre:nth-of-type(2) {
  overflow: clip;
  overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
  content: "clip: ";
}

pre:nth-of-type(3) {
  overflow: scroll;
}
pre:nth-of-type(3)::before {
  content: "scroll: ";
}

pre:nth-of-type(4) {
  overflow: auto;
}
pre:nth-of-type(4)::before {
  content: "auto: ";
}

pre:nth-of-type(5) {
  overflow: clip;
  overflow: overlay;
  overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
  content: "overlay (or clip if not supported): ";
}

pre:nth-of-type(6) {
  overflow: visible;
}
pre:nth-of-type(6)::before {
  content: "visible: ";
}

结果

要查看键盘焦点对溢出和滚动行为的影响，请尝试通过 Tab 键遍历示例中的所有链接。请注意，clip 框不会创建滚动容器，并且当链接获得焦点时，链接不会进入视图。visible 值始终使链接在视图中，也不是滚动容器。

规范

规范
CSS 溢出模块第 3 级
# propdef-overflow

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.