溢位內容
溢位是指當內容過多，無法完全放入元素框中時發生的情況。在本課程中，你將學習如何使用 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 避免使溢位內容不可見。你已經發現你可以管理潛在的溢位，並且，你應該測試工作以確保它不會意外導致有問題的溢位。
在下一篇文章中，我們將為你提供一些測試，你可以用來檢查你對我們提供的溢位資訊的理解和記憶程度。