overflow

overflowCSS简写属性,其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。

尝试一下

构成的属性

这个属性是以下 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-x,第二个关键字用于 overflow-y。否则,overflow-xoverflow-y 设置为相同的属性值。

visible

内容不能被裁减并且可能渲染到边距盒(padding)的外部。

hidden

如果需要,内容将被裁减以适应边距(padding)盒。不提供滚动条,也不支持允许用户滚动(例如通过拖拽或者使用滚轮)。内容可以以编程的方式滚动(例如,通过设置 scrollLeft 等属性的值或 scrollTo() 方法), 因此该元素仍然是一个滚动的容器。

clip

类似于 hidden,内容将以元素的边距(padding)盒进行裁剪。cliphidden 之间的区别是 clip 关键字禁止所有滚动,包括以编程方式的滚动。该盒子不是一个滚动的容器,并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文,你可以使用 display: flow-root 来这样做。

scroll

如果需要,内容将被裁减以适应边距(padding)盒。无论是否实际裁剪了任何内容,浏览器总是显示滚动条,以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

auto

取决于用户代理。如果内容适应边距(padding)盒,它看起来与 visible 相同,但是仍然建立了一个新的块级格式化上下文。如果内容溢出,则浏览器提供滚动条。

overlay 已弃用

行为与 auto 相同,但是滚动条绘制在内容之上,而不是占据空间。

Mozilla 扩展

-moz-scrollbars-none 已弃用

请使用 overflow: hidden 代替。

-moz-scrollbars-horizontal 已弃用

请使用 overflow-x: scrolloverflow-y: hidden,或使用 overflow: scroll hidden 代替。

-moz-scrollbars-vertical 已弃用

请使用 overflow-x: hiddenoverflow-y: scroll,或使用 overflow: hidden scroll 代替。

-moz-hidden-unscrollable 已弃用

请使用 overflow: clip 代替。

在 Firefox 63 中:-moz-scrollbars-none-moz-scrollbars-horizontal-moz-scrollbars-vertical 位于特性首选项中。即需要在 about:config 中,将 layout.css.overflow.moz-scrollbars.enabled 设置为 true

描述

overflow 选项包括裁减、显示滚动条,或者显示从容器流向周围区域的内容。

指定 visible(默认)或 clip 以外的值,会创建一个新的区块格式化上下文。由于技术原因,这是必要的——如果浮动包含滚动元素,它将在每个滚动步骤后强制重新包装内容,从而导致一个缓慢的滚动体验。

为使 overflow 具有效果,块级水平的容器必须有一个设定的高度(heightmax-height)或 white-space 设置为 nowrap

设置一个轴为 visible(默认值),而设置另一个轴为不同的值时,visible 的行为会像 auto 一样。

JavaScript 的 Element.scrollTop 属性可用于滚动 HTML 元素,即使当 overflow 设置为 hidden 时。

形式定义

初始值visible
适用元素Block-containers, flex containers, and grid containers
是否是继承属性
计算值该简写所对应的每个属性:
  • overflow-x: 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-y: 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 = 
<'overflow-block'>{1,2}

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

示例

为文本设置不同的 overflow 值

HTML

html
<div>
  <code>visible</code>
  <p class="visible">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

CSS

css
body {
  display: flex;
  justify-content: space-around;
}

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

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

结果

规范

Specification
CSS Overflow Module Level 3
# propdef-overflow
Scalable Vector Graphics (SVG) 2
# OverflowAndClipProperties

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow
auto
clip
hidden
Multiple keyword syntax for overflow-x and overflow-y
scroll
visible

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

参见