<overflow>

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

语法

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

值

<overflow> 枚举类型使用以下列出的值之一进行指定。

visible

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

hidden

溢出内容在元素的填充框处被裁剪。没有滚动条，裁剪的内容不可见（即裁剪的内容被隐藏），但内容仍然存在。用户代理不添加滚动条，也不允许用户通过触控屏拖动或使用鼠标滚轮等操作来查看裁剪区域之外的内容。内容 *可以* 通过编程方式滚动（例如，通过设置 scrollLeft 属性的值或使用 scrollTo() 方法）。内容也可以通过键盘交互来滚动；箭头可以滚动内容，并将焦点转移到隐藏内容中的可聚焦元素，可以滚动该元素以使其可见。设置此值的元素框是滚动容器。

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅