overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`overflow`** 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

尝试一下
----

构成的属性
-----

这个属性是以下 CSS 属性的简写：

* `overflow-x`
* `overflow-y`
语法
--


```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-x` 和 `overflow-y` 设置为相同的属性值。

### 值

`visible`

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

`hidden`

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

`clip`

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

`scroll`

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

`auto`

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

`overlay` 
已弃用

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

#### Mozilla 扩展

`-moz-scrollbars-none` 
已弃用

请使用 `overflow: hidden` 代替。

`-moz-scrollbars-horizontal` 
已弃用

请使用 ``overflow-x`: scroll` 和 ``overflow-y`: hidden`，或使用 `overflow: scroll hidden` 代替。

`-moz-scrollbars-vertical` 
已弃用

请使用 ``overflow-x`: hidden` 和 ``overflow-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` 具有效果，块级水平的容器必须有一个设定的高度（`height` 或 `max-height`）或 `white-space` 设置为 `nowrap`。

设置一个轴为 `visible`（默认值），而设置另一个轴为*不同的*值时，`visible` 的行为会像 `auto` 一样。

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `visible` |
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `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
 |
| Animation type | discrete |

形式语法
----
```

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

示例
--

### 为文本设置不同的 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 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关 CSS 属性：`text-overflow`、`white-space`、`overflow-x`、`overflow-y`、`overflow-inline`、`overflow-block`、`clip`、`display`
* CSS Overflow (en-US) 和 Debug scrollable overflow