溢出内容
溢出是指当内容过多，无法完全放入元素框中时发生的情况。在本课程中，你将学习如何使用 CSS 管理溢出。
什么是溢出？
CSS 中的所有内容都是一个盒子。你可以通过分配诸如 width 和 height 之类的值来限制这些盒子的大小。当内容过多而无法容纳在一个盒子中时，就会发生溢出。CSS 提供了各种工具来管理溢出。随着你深入学习 CSS 布局和编写 CSS，你将遇到更多的溢出情况。
CSS 尝试避免“数据丢失”
让我们看两个示例，它们演示了当发生溢出时 CSS 的默认行为。
第一个示例是一个通过设置 height 限制的盒子。盒子的内容超出了可用空间，因此它溢出了盒子并落入下面的段落。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
}
第二个示例是一个盒子中的一个单词。盒子做得太小，无法容纳这个单词，因此它超出了盒子。
<div class="word">Overflow</div>
.word {
border: 1px solid #333333;
width: 100px;
font-size: 250%;
}
你可能想知道为什么 CSS 以这种混乱的方式工作，将内容显示在其预期容器之外。为什么不隐藏溢出的内容呢？为什么不缩放容器的大小以适应所有内容呢？
在可能的情况下，CSS 不会隐藏内容。这会导致数据丢失。数据丢失的问题是，你或你网站的访问者可能不会注意到。如果表单上的提交按钮消失了，没有人能够完成表单，这可能是一个大问题！相反，CSS 以可见的方式溢出。你更有可能看到有问题。最糟糕的情况是，网站访问者会告诉你内容重叠了。
如果你用 width 或 height 限制一个盒子，CSS 相信你知道自己在做什么。CSS 假设你正在管理溢出的可能性。一般来说，当盒子包含文本时，限制块尺寸会带来问题。网站设计时文本可能比你预期的多，或者文本可能更大（例如，如果用户增加了字体大小）。
overflow 属性
通过 overflow 属性，你可以指定浏览器应如何处理溢出内容。 <overflow> 值类型的默认值为 visible。通过此默认设置，当内容溢出时可以被看到。
隐藏溢出的内容
要隐藏溢出的内容，你可以设置 overflow: hidden。这正是它所说的：它隐藏溢出。请注意，这可能会使某些内容不可见。你只应该在隐藏内容不会造成问题的情况下这样做。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: hidden;
}
尝试编辑上面的示例，将 overflow 值设置为 visible，然后改回 hidden，以查看效果。
滚动溢出的内容
相反，也许你希望允许你的用户滚动内容来阅读所有内容？当你在溢出内容上设置 overflow: scroll 时，带有可见滚动条的浏览器将始终显示它们——即使没有足够的内容溢出。这提供了保持布局一致的优势，而不是根据容器中的内容量出现或消失滚动条。
让我们看看实际效果。编辑下面的示例，从 box <div> 中删除一些内容。请注意，即使不需要滚动，滚动条仍然存在。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: scroll;
}
注意：滚动条的可见性取决于操作系统。你可能需要更改浏览器设置以始终显示滚动条，以便在以下示例中始终显示滚动条。
在上面的示例中，我们只需要在 y 轴上滚动，但是我们在两个轴上都获得了滚动条。要仅在 y 轴上滚动，你可以使用 overflow-y 属性，设置 overflow-y: scroll。尝试在上面的示例中设置此属性。
你还可以通过使用 overflow-x 来启用沿 x 轴的滚动，尽管这不是容纳长单词的推荐方法！如果你在一个小盒子中有一个长单词，请考虑使用 word-break 或 overflow-wrap 属性。此外，CSS 中项目的尺寸 中讨论的一些方法可能有助于你创建能够更好地适应不同内容量的盒子。
<div class="word">Overflow</div>
.word {
border: 5px solid #333333;
width: 100px;
font-size: 250%;
overflow-x: scroll;
}
与 scroll 一样，无论是否有足够的内容导致滚动条，你都会在滚动维度中获得一个滚动条。
注意：你可以使用 overflow 属性指定 x 轴和 y 轴滚动，传递两个值。如果指定了两个关键字，第一个应用于 overflow-x，第二个应用于 overflow-y。否则，overflow-x 和 overflow-y 都设置为相同的值。例如，overflow: scroll hidden 将设置 overflow-x 为 scroll，overflow-y 为 hidden。
仅在需要时显示滚动条
如果你只希望在内容超出盒子可容纳范围时才显示滚动条，请使用 overflow: auto。这允许浏览器决定是否应显示滚动条。
在下面的示例中，删除内容直到它适合盒子。你应该会看到滚动条消失。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: auto;
}
网页设计中不必要的溢出
现代布局方法（你将在稍后的 CSS 布局 模块中遇到）可以管理溢出。它们在很大程度上不依赖于网页上内容量的假设或依赖。
这并非一直如此。过去，一些网站使用固定高度的容器来对齐盒子底部。这些盒子可能彼此之间没有任何关系。这种做法很脆弱。如果你遇到一个内容覆盖其他内容的盒子，你现在会意识到溢出很可能是造成这种情况的原因。理想情况下，你应该重构布局，使其不依赖于固定高度的容器。
在开发网站时，始终牢记溢出。使用大量和少量内容测试设计。至少增加和减少字体大小两个增量。确保你的 CSS 健壮。更改溢出值以隐藏内容或添加滚动条仅限于少数几个特定的用例（例如，你打算有一个可滚动盒子的情况）。
总结
本课程介绍了溢出的概念。你应该了解默认 CSS 避免使溢出内容不可见。你已经发现你可以管理潜在的溢出，并且，你应该测试工作以确保它不会意外导致有问题的溢出。
在下一篇文章中，我们将为你提供一些测试，你可以用来检查你对我们提供的溢出信息的理解和记忆程度。