内容溢出

¥What is overflow?

CSS 中的所有内容都是一个盒子。你可以通过指定 width 和 height（或 inline-size 和 block-size）的值来限制这些框的大小。当盒子里装不下太多内容时就会发生溢出。CSS 提供了各种工具来管理溢出。当你进一步了解 CSS 布局和编写 CSS 时，你会遇到更多溢出情况。

¥Everything in CSS is a box. You can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size). Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.

¥CSS tries to avoid "data loss"

让我们考虑两个示例，演示 CSS 在发生溢出时的默认行为。

¥Let's consider two examples that demonstrate the default behavior of CSS when there is overflow.

第一个示例是通过设置 height 限制的框。然后我们添加超出分配空间的内容。内容溢出框并落入下面的段落中。

¥The first example is a box that has been restricted by setting a height. Then we add content that exceeds the allocated space. The content overflows the box and falls into the paragraph below.

第二个示例是框中的单词。盒子太小，无法容纳单词，所以它会从盒子里掉出来。

¥The second example is a word in a box. The box has been made too small for the word and so it breaks out of the box.

你可能想知道为什么 CSS 以如此混乱的方式工作，在其预期容器之外显示内容。为什么不隐藏溢出的内容呢？为什么不缩放容器的大小以适应所有内容呢？

¥You might wonder why CSS works in such a messy way, displaying content outside of its intended container. Why not hide overflowing content? Why not scale the size of the container to fit all the content?

只要有可能，CSS 就不会隐藏内容。这会导致数据丢失。数据丢失的问题是你可能没有注意到。网站访问者可能不会注意到。如果表单上的提交按钮消失并且没有人可以完成表单，这可能是一个大问题！相反，CSS 以可见的方式溢出。你更有可能发现存在问题。最坏的情况是，网站访问者会让你知道内容是重叠的。

¥Wherever possible, CSS does not hide content. This would cause data loss. The problem with data loss is that you might not notice. Website visitors may not notice. If the submit button on a form disappears and no one can complete the form, this could be a big problem! Instead, CSS overflows in visible ways. You are more likely to see there is a problem. At worst, a site visitor will let you know that content is overlapping.

如果你用 width 或 height 限制一个框，CSS 相信你知道你在做什么。CSS 假定你正在管理溢出的可能性。一般来说，当框包含文本时，限制块尺寸是有问题的。设计网站时，文本可能比你预期的要多，或者文本可能更大（例如，如果用户增加了字体大小）。

¥If you restrict a box with a width or a height, CSS trusts you to know what you are doing. CSS assumes that you are managing the potential for overflow. In general, restricting the block dimension is problematic when the box contains text. There may be more text than you expected when designing the site, or the text may be larger (for example, if the user has increased their font size).

接下来的两节课解释了以不易溢出的方式控制大小的不同方法。但是，如果你需要固定大小，你还可以控制溢出的行为方式。让我们继续读下去吧！

¥The next two lessons explain different approaches to control sizing in ways that are less prone to overflow. However, if you need a fixed size, you can also control how the overflow behaves. Let's read on!

¥The overflow property

overflow 属性可帮助你管理元素的内容溢出。使用此属性，你可以向浏览器传达它应如何处理溢出内容。<overflow> 值类型的默认值为 visible。使用此默认设置，用户可以在内容溢出时看到内容。

¥The overflow property helps you manage an element's content overflow. Using this property, you can convey to a browser how it should handle overflow content. The default value of the <overflow> value type is visible. With this default setting, one can see content when it overflows.

要在溢出时裁剪内容，可以设置 overflow: hidden。这正是它所说的：它隐藏了溢出。请注意，这可能会使某些内容不可见。仅当隐藏内容不会导致问题时才应执行此操作。

¥To crop content when it overflows, you can set overflow: hidden. This does exactly what it says: it hides overflow. Beware that this can make some content invisible. You should only do this if hiding content won't cause problems.

相反，也许你想在内容溢出时添加滚动条？使用 overflow: scroll，具有可见滚动条的浏览器将始终显示它们 - 即使没有足够的内容溢出。这提供了保持布局一致的优点，而不是根据容器中的内容量出现或消失滚动条。

¥Instead, perhaps you would like to add scrollbars when content overflows? Using overflow: scroll, browsers with visible scrollbars will always display them—even if there is not enough content to overflow. This offers the advantage of keeping the layout consistent, instead of scrollbars appearing or disappearing, depending upon the amount of content in the container.

从下面的框中删除一些内容。请注意滚动条如何保留，即使不需要滚动。

¥Remove some content from the box below. Notice how the scrollbars remain, even if there is no need for scrolling.

在上面的示例中，我们只需要在 y 轴上滚动，但是我们在两个轴上都有滚动条。要仅在 y 轴上滚动，你可以使用 overflow-y 属性，设置 overflow-y: scroll。

¥In the example above, we only need to scroll on the y axis, however we get scrollbars in both axes. To just scroll on the y axis, you could use the overflow-y property, setting overflow-y: scroll.

你还可以使用 overflow-x 启用沿 x 轴滚动，尽管这不是适应长单词的推荐方法！如果小框中包含长单词，请考虑使用 word-break 或 overflow-wrap 属性。此外，在 CSS 中调整项目大小 中讨论的一些方法可能会帮助你创建能够更好地适应不同内容量的盒子。

¥You can also enable scrolling along the x-axis by using overflow-x, although this is not a recommended way to accommodate long words! If you have a long word in a small box, consider using the word-break or overflow-wrap property. In addition, some of the methods discussed in Sizing items in CSS may help you create boxes that scale better with varying amounts of content.

与 scroll 一样，无论是否有足够的内容导致滚动条，你都会在滚动维度中获得滚动条。

¥As with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar.

注意：你可以使用 overflow 属性指定 x 轴和 y 轴滚动，并传递两个值。如果指定两个关键字，第一个适用于 overflow-x，第二个适用于 overflow-y。否则，overflow-x 和 overflow-y 都设置为相同的值。例如，overflow: scroll hidden 会将 overflow-x 设置为 scroll，将 overflow-y 设置为 hidden。

¥Note: You can specify x- and y-axis scrolling using the overflow property, passing two values. If two keywords are specified, the first applies to overflow-x and the second applies to overflow-y. Otherwise, both overflow-x and overflow-y are set to the same value. For example, overflow: scroll hidden would set overflow-x to scroll and overflow-y to hidden.

如果你只想在内容超出框内容纳范围时显示滚动条，请使用 overflow: auto。这允许浏览器确定是否应该显示滚动条。

¥If you only want scrollbars to appear when there is more content than can fit in the box, use overflow: auto. This allows the browser to determine if it should display scrollbars.

在下面的示例中，删除内容直至其适合该框。你应该看到滚动条消失。

¥In the example below, remove content until it fits into the box. You should see the scrollbars disappear.

¥Overflow establishes a Block Formatting Context

当你使用 <overflow> 值 scroll 和 auto 时，你将创建一个 块格式化上下文 (BFC)。这意味着具有这些 overflow 值的元素框的内容获得独立的布局。此类元素框外部的内容无法插入元素框，并且元素框中的任何内容都无法插入周围的布局。这使得滚动行为成为可能，因为所有框内容都需要被包含并且不重叠以创建一致的滚动体验。

¥When you use the <overflow> values scroll and auto, you create a Block Formatting Context (BFC). This means that the content of an element box with these overflow values acquires a self-contained layout. Content outside such an element box cannot poke into the element box, and nothing from the element box can poke into the surrounding layout. This enables scrolling behavior, as all box content needs to be contained and not overlap to create a consistent scrolling experience.

¥Unwanted overflow in web design

现代布局方法（在 CSS 布局 中描述）管理溢出。它们在很大程度上不需要假设或依赖于网页上的内容量。

¥Modern layout methods (described in CSS layout) manage overflow. They largely work without assumptions or dependencies for how much content there will be on a web page.

这并不总是常态。过去，一些网站构建了固定高度的容器，以对齐箱底。否则这些盒子可能彼此没有关系。这是脆弱的。如果你在旧版应用中遇到内容与页面上的其他内容重叠的框，你现在会意识到这种情况是由于溢出而发生的。理想情况下，你将重构布局以不依赖固定高度的容器。

¥This was not always the norm. In the past, some sites were built with fixed-height containers to align box bottoms. These boxes may otherwise have had no relationship to each other. This was fragile. If you encounter a box where content is overlaying other content on the page in legacy applications, you will now recognize that this happens with overflow. Ideally, you will refactor the layout to not rely on fixed-height containers.

开发网站时，请始终牢记溢出。使用大量和少量内容测试设计。将字体大小增大和减小至少两个增量。确保你的 CSS 健壮。更改溢出值以隐藏内容或添加滚动条是为一些选定的用例（例如，你打算有一个滚动框）保留的。

¥When developing a site, always keep overflow in mind. Test designs with large and small amounts of content. Increase and decrease font sizes by at least two increments. Ensure your CSS is robust. Changing overflow values to hide content or to add scrollbars is reserved for a few select use cases (for example, where you intend to have a scrolling box).

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅 测试你的技能：溢出。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Overflow.

¥Summary

本课介绍了溢出的概念。你应该了解默认 CSS 会避免使溢出内容不可见。你发现你可以管理潜在的溢出，而且你应该测试工作以确保它不会意外地导致有问题的溢出。

¥This lesson introduced the concept of overflow. You should understand that default CSS avoids making overflowing content invisible. You have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow.

在下一篇文章中，我们将了解 CSS 中最常见的 数值和单位。

¥In the next article, we'll take a look at the most common values and units in CSS.