溢出的内容（理解溢出和控制溢出的方法）

Posted 2021-06-17 尖子

溢出的内容

溢出是在盒子无法容纳下太多的内容的时候发生的。

什么是溢出？

我们知道，CSS中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。

CSS尽力减少“数据损失”

我们从两个展示了在碰到溢出的时候，CSS默认会如何处理的例子开始吧。

第一个例子是，一个盒子，在块方向上已经受到height的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
}

<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.</div>

<p>This content is outside of the box.</p>

第二个例子是一个单词，位于在内联方向上受到限制的盒子里面。盒子已经被做得小到无法放置那个单词的地步，于是那个单词就突破了盒子的限制。

.word {
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}

<div class="word">Overflow</div>

你也许会好奇，为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？

只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。

如果你已经用width或者height限制住了一个盒子，CSS假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。

在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！

overflow属性

overflow属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow的默认值为visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。

如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置overflow: hidden。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  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>

也许你还会想在有内容溢出的时候加个滚动条？如果你用了overflow: scroll，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。

如果你移除了下面的盒子里的一些内容，你可以看一下，滚动条是否还会在没有能滚动的东西的时候保留。

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: scroll;
}

<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>

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

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

<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>

你也可以用overflow-x，以在x轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下word-break或者overflow-wrap属性。除此以外，一些在CSS里面调整大小这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。

.word {
  border: 5px solid #333333;
  width: 100px;
  font-size: 250%;
  overflow-x: scroll;
}

<div class="word">Overflow</div>

和scroll一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。

注意： 你可以用overflow属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效。否则，overflow-x和overflow-y将会被设置成同样的值。例如，overflow: scroll hidden会把overflow-x设置成scroll，而overflow-y则为hidden。

如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。

在下面的例子里面，移除一些内容，直到能够装在盒子里面，你还会看到滚动条消失了。

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  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>

溢出建立了块级排版上下文

CSS中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。现在你不用太过在意，但是你应该知道，在你使用诸如scroll或者auto的时候，你就建立了一个块级排版上下文。结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。

网页设计时不需要的溢出

现代网页布局的方式（正如CSS layout模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。

在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。