CSS Overflow

本文将讲解 "Overflow" 这一 CSS 属性。

CSS overflow 属性 指定了当内容溢出其块级容器时如何处理。

页面上的每个元素都是一个矩形框，这些框的大小、定位和行为通过 CSS 控制。

例如，如果你不设置框的高度，它会根据内容自动增长。但如果你设置了框的特定高度或宽度，那么内容可能不完全适合容器。如果内容适合容器，那很好，但如果不适合，那么 CSS overflow 属性用于解决这个问题，它指定是剪裁内容、渲染滚动条还是显示内容。

CSS overflow 属性值

CSS overflow 属性可以有多种值。这些值在下表中描述

CSS 溢出属性的示例

我们将通过示例来理解 CSS overflow 属性。

插图 1

• 在本例中，我们将对 <p> 元素 使用 overflow CSS 属性。
• 我们将指定 CSS overflow 属性的值为 "visible"。

代码

输出

这是输出，我们可以看到 <p> 元素 下的文本溢出。因为我们将 overflow CSS 属性设置为 "visible"，所以内容在容器外部可见。

插图 2

在本例中，我们将对 <div> 元素 使用 CSS overflow 属性，并将 CSS overflow 属性的值设置为 "hidden"。

代码

输出

在输出中，我们可以看到当内容溢出容器边界时，<div> 元素 内的文本已被 隐藏。

插图 3

• 在本例中，我们将对 <div> 元素 使用 CSS overflow 属性。
• 我们将把 CSS overflow 属性的值设置为 "scroll"。

代码

输出

这是结果，我们可以看到当 <div> 元素 下的文本溢出时，会出现垂直和水平滚动条，用户可以滚动以阅读所有内容。

插图 4

• 在本例中，我们将对 <p> 元素 使用 CSS overflow 属性。
• 我们将把 CSS overflow 属性的值设置为 "auto"。

代码

输出

这是结果，我们可以看到当段落-1 的宽度设置为 125px 且段落-1 内的文本溢出时，会出现垂直滚动条，但是当段落-2 的宽度设置为 150px 时，段落-2 内的内容适合容器。

插图 5

• 在本例中，我们将对 <p> 元素 使用 CSS overflow 属性。
• 我们将 CSS overflow 属性的值设置为 "clip"。

代码

输出

这是结果，我们可以看到当 <p> 元素 下的内容超出容器时，内容会被 剪裁。

插图 6

• 在本例中，我们将对 HTML 元素 使用 CSS overflow 属性。
• 我们将指定 CSS overflow 属性的值为 "initial" 和 "inherit"。

代码

输出

这是结果，我们可以看到当第一个段落和第二个段落中的文本溢出时，超出内容是 可见的。

浏览器兼容性

以下是支持 CSS overflow 属性的浏览器

• 谷歌浏览器
• Safari
• Opera
• 火狐
• Microsoft Edge

结论

本文我们了解了 CSS overflow 属性。我们已经理解了 CSS overflow 属性可以采用各种值，例如 visible、hidden、scroll、auto、clip、initial 和 inherit。这些值有助于处理溢出容器的内容。