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

溢出的內容

溢出是在盒子無法容納下太多的內容的時候發生的。

什么是溢出？

我們知道，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可以正常地協調。改變溢出屬性的值，來隱藏內容或者增加滾動條，會是你僅僅在少數特別情況下需要的，例如在你確實需要一個可滾動盒子的時候。