溢位的內容

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

什麼是溢位？

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