內容溢位
溢位是指當內容過多而無法容納在元素框中時發生的情況。在本指南中，您將瞭解什麼是溢位以及如何管理它。
什麼是溢位？
CSS 中的一切都是一個盒子。可以透過分配width和height（或inline-size和block-size）的值來約束這些盒子的尺寸。當內容過多無法容納在盒子中時，就會發生溢位。CSS 提供了各種工具來管理溢位。隨著你進一步學習CSS佈局和編寫CSS，你會遇到更多溢位情況。
CSS 嘗試避免“資料丟失”
讓我們考慮兩個示例，它們演示了CSS在發生溢位時的預設行為。
第一個示例是一個透過設定height來限制大小的盒子。然後我們新增超出分配空間的內容。內容溢位盒子並落入下面的段落。
第二個示例是一個盒子中的一個單詞。盒子的尺寸過小，無法容納單詞，因此單詞溢位了盒子。
你可能想知道為什麼CSS以如此混亂的方式工作，將內容顯示在預期的容器之外。為什麼不隱藏溢位的內容？為什麼不調整容器的大小以適應所有內容？
只要有可能，CSS 不會隱藏內容。這會導致資料丟失。資料丟失的問題在於你可能不會注意到。網站訪問者也可能不會注意到。如果表單上的提交按鈕消失了，沒有人能夠完成表單，這可能是一個大問題！相反，CSS 以可見的方式溢位。你更有可能看到存在問題。在最壞的情況下，網站訪問者會通知你內容重疊。
如果你使用width或height來限制盒子，CSS 會相信你知道你在做什麼。CSS 假設你在管理潛在的溢位。通常，當盒子包含文字時，限制塊維度是有問題的。在設計網站時，文字可能比你預期的多，或者文字可能更大（例如，如果使用者增加了字型大小）。
接下來的兩節課將解釋控制大小的不同方法，這些方法不太容易發生溢位。但是，如果你需要固定大小，你也可以控制溢位的行為。讓我們繼續閱讀！
overflow 屬性
overflow 屬性可以幫助你管理元素的內容溢位。使用此屬性，你可以向瀏覽器傳達它應該如何處理溢位的內容。<overflow> 值型別的預設值為visible。使用此預設設定，當內容溢位時，可以檢視內容。
如果內容溢位時要裁剪內容，可以設定overflow: hidden。這正是它的字面意思：隱藏溢位。注意，這可能會使某些內容不可見。只有在隱藏內容不會導致問題時才應這樣做。
或者，你可能希望在內容溢位時新增捲軸？使用overflow: scroll，具有可見捲軸的瀏覽器將始終顯示它們，即使沒有足夠的內容溢位。這提供了保持佈局一致的優勢，而不是捲軸根據容器中的內容量出現或消失。
從下面的框中刪除一些內容。注意，即使不需要滾動，捲軸也會保留。
注意：捲軸的可見性取決於作業系統。你可能需要更改瀏覽器設定以始終顯示捲軸，以便在以下示例中始終顯示捲軸。
在上面的示例中，我們只需要在y軸上滾動，但是我們在兩個軸上都獲得了捲軸。要只在y軸上滾動，可以使用overflow-y 屬性，並將overflow-y設定為scroll。
你還可以使用overflow-x啟用沿x軸的滾動，儘管這不是容納長單詞的推薦方法！如果在一個小盒子裡有一個長單詞，請考慮使用word-break或overflow-wrap屬性。此外，在CSS 中調整專案大小中討論的一些方法可能有助於你建立能夠更好地適應不同內容量的盒子。
與scroll一樣，無論是否有足夠的內容導致捲軸，你都會在滾動維度中獲得一個捲軸。
注意：可以使用overflow屬性傳遞兩個值來指定x軸和y軸滾動。如果指定了兩個關鍵字，則第一個應用於overflow-x，第二個應用於overflow-y。否則，overflow-x和overflow-y都設定為相同的值。例如，overflow: scroll hidden會將overflow-x設定為scroll，將overflow-y設定為hidden。
如果只想在內容超出盒子容量時顯示捲軸，請使用overflow: auto。這允許瀏覽器確定是否應該顯示捲軸。
在下面的示例中，刪除內容，直到它適合盒子。你應該看到捲軸消失。
Overflow 建立塊級格式化上下文
當你使用<overflow>值scroll和auto時，會建立一個塊級格式化上下文 (BFC)。這意味著具有這些overflow值的元素盒的內容會獲得一個自包含的佈局。此元素盒外部的內容無法侵入元素盒，並且元素盒中的任何內容都無法侵入周圍的佈局。這使得滾動行為成為可能，因為所有盒子內容都需要包含在內，並且不能重疊才能建立一致的滾動體驗。
Web 設計中不需要的溢位
現代佈局方法（在CSS 佈局中描述）管理溢位。它們在很大程度上無需假設或依賴網頁上的內容數量。
這並非一貫如此。過去，一些網站使用固定高度的容器來對齊盒子底部。否則，這些盒子之間可能沒有任何關係。這是脆弱的。如果你在舊版應用程式中遇到一個盒子，其中內容覆蓋頁面上的其他內容，你現在就會認識到這是由於溢位造成的。理想情況下，你將重構佈局，使其不依賴於固定高度的容器。
在開發網站時，始終牢記溢位。使用大量和少量內容測試設計。至少增加和減少兩次字型大小。確保你的CSS健壯。更改溢位值以隱藏內容或新增捲軸僅保留用於少數幾個特定用例（例如，你打算使用滾動框的地方）。
測試你的技能！
你已經到達了本文的結尾，但你能記住最重要的資訊嗎？在繼續之前，你可以找到一些進一步的測試來驗證你是否保留了這些資訊——請參閱測試你的技能：溢位。
總結
本課介紹了溢位的概念。你應該理解，預設的CSS避免使溢位的內容不可見。你已經發現你可以管理潛在的溢位，並且還應該測試工作以確保它不會意外地導致有問題的溢位。
在下一篇文章中，我們將看看CSS中最常見的值和單位。