「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。
在本教程中，我们将讨论一个重要的 CSS 属性——
overflow属性。
它可以帮助我们控制当元素的内容太大而无法放入某个区域时会发生什么。发生这种情况时，它会使内容“溢出”到另一个区域，水平（X 轴）或垂直（Y 轴）。
我们将检查溢出属性的以下值，看看它们是如何工作的：
visiblehiddenscrollauto
visible
如果未指定，这是overflow属性采用的默认值。有了这个属性，当我们的内容溢出到另一个区域时，我们可以清楚的看到我们的内容。
考虑以下示例：
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
</p>
</div>
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
这是非常基本的。我们为页面设置了黑色背景色。我们将div充当容器的元素的背景颜色设置为白色。它的高度和宽度各为 200 像素。然后我们将段落的文本颜色设为绿色。
看起来是这样的：
文本舒适地放置在白色容器中，而不会在两个轴上越过容器的边界。但情况并非总是如此。
您可能正在处理一个项目，然后意识到一段文本越界了。像这样的东西：
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
</p>
</div>
CSS 样式保持不变。现在看看容器和文本发生了什么：
文本无法放入白色容器，因此它溢出并越过容器的边界。在现实生活中的项目中，这会更加烦人，因为您会让此文本与页面上的其他元素重叠。
我们能够看到文本溢出到另一个区域，因为这里的默认值是visible即使我们没有指定。
让我们继续并将其添加到我们的 CSS 中，以便您可以看到overflow正在应用的属性：
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: visible;
}
p{
color: green;
}
我们已添加overflow: visible;到div. 结果保持不变——我们会看到我们的文本溢出到另一个区域。
在接下来的部分中，我们将看到可以帮助我们控制内容溢出时发生的各种值。
hidden
使用该hidden值，溢出的文本部分将被剪掉——它将是“不可见的”。您不必担心溢出占用的空间。一旦内容被切掉，它就不再在它溢出的区域了。
在讨论为什么这不是最佳解决方案之前，我们将先看一个示例。让我们添加hidden值：
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: hidden;
}
p{
color: green;
}
以下是容器中的文本发生的情况：
如您所见，我们无法再看到越过容器边界的那部分文本。
这解决了在不应该存在的区域中包含内容的问题，但它没有提供访问被切断内容的方法。所以我们将在下一节解决这个问题。
scroll
所以我们已经知道该hidden值将文本剪切并隐藏起来。但是该scroll值也会剪切文本并提供一个滚动条，因此我们可以滚动并查看被剪切的文本部分。
我们来看一下：
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: scroll;
}
p{
color: green;
}
现在我们在两个轴上都有滚动条。水平滚动条与我们无关，因为我们没有朝那个方向溢出的内容。我们将在下一节中解决这个问题。
auto
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: auto;
}
p{
color: green;
}
现在滚动条只垂直显示。该auto值检测溢出发生的位置并在该方向添加滚动条。
没有水平添加滚动条，因为我们在该轴上没有内容溢出。同样，如果我们在两个轴上都没有溢出，则不会添加滚动条。
overflow-x和overflow-y属性
在前面部分中使用的示例中，我们使用了overflow属性。这适用于水平轴和垂直轴。如果您希望单独检查溢出，可以使用这些：
overflow-x指定内容水平溢出（从左到右）时会发生什么。overflow-y指定内容垂直溢出时（从上到下）会发生什么。
相同的值 – visible、hidden和–scroll也auto可以在这里使用。
一个简单的例子：
div {
overflow-x: hidden; /* overflow is visible in x-axis */
overflow-y: scroll; /* scrollbar is added when there is overflow in y-axis */
}
结论
在本教程中，我们学习了如何控制页面上的内容溢出。我们看到了可以分配给overflow属性的各种值以及这些值产生的不同结果。
最后，我们学习了如何仅overflow在水平或垂直方向上应用属性值。
