CSS讓成都小程序設計可以精確控制您的內容在網頁上的顯示方式。一個CSS屬性溢出是前端程序員需要知道的關鍵，因為如果在某些情況下不加以檢查，它可能會導致您的內容看起來凌亂甚至不可讀。
無論您使用的是純CSS還是像Bootstrap這樣的框架，您都需要了解以下內容。
在CSS中，當元素的內容不能完全容納在元素框內時，就會發生溢出。當元素的指定高度對于它包含的內容來說太小時，就會發生這種情況。您可以使用CSS溢出屬性來控制溢出發生的情況。
在查看溢出屬性之前，讓我們先澄清一下“元素框”的含義。根CSS盒子模型，為HTML元素生成一個盒子。這個框包含四層：內容本身、填充、邊框和邊距。
當HTML元素的內容超出框的任何邊緣時——無論是內容邊緣、填充邊緣、邊框邊緣還是邊距邊緣——它被稱為溢出。
CSSoverflow屬性有幾種控制溢出的方法。讓我們仔細看看它的值。
可見意味著溢出的內容不會被裁剪。相反，它將呈現在元素的框外，并可能與頁面上的其他元素重疊。這是溢出屬性的默認值。
為防止溢出在元素框外呈現，您可以將溢出屬性設置為隱藏。這將在框的填充邊緣剪切內容。此外，它不允許用戶通過滾動查看填充邊緣以外的內容。
請注意，此值仍然允許編程滾動，這意味著該框在技術上是一個滾動容器。例如，用戶可以使用CSSOM View Module定義的機制來查看隱藏的內容。
要在允許用戶查看內容的同時隱藏元素框外的溢出，請將溢出屬性設置為“滾動”。溢出仍將在框的填充邊緣處被剪裁。但是，添加了一個滾動條，以便用戶可以滾動查看當前不可見的內容。
“auto”值類似于滾動，但僅當框溢出時才添加滾動條。
在下面的示例中，兩個div都定義了自動溢出值，但只有第二個div具有可滾動溢出和滾動條。
您可以使用overflow-x和overflow-y屬性來控制水平和垂直溢出，而不是使用溢出。
overflow-x屬性控制水平溢出——換句話說，從元素框的左側和右側溢出。
在此示例中，overflow-x設置為滾動，因此您可以從左向右滾動以查看圖像。但是overflow-y設置為隱藏，所以你不能上下滾動。
overflow-y屬性控制垂直溢出，即從元素框的頂部和底部溢出。
本例中overflow-y設置為scroll，overflow-x這次設置為hidden。
您還可以使用簡寫overflow屬性，而不是同時定義overflow-x和overflow-y屬性。如果指定了兩個值，第一個代表overflow-x的值，第二個代表overflow-y的值
如果只有一個值，則它適用于overflow-x和overflow-y屬性。例如，如果我用overflow: scroll; 定義了包含圖像的 div；然后圖像可以水平和垂直滾動。
CSSoverflow-wrap屬性指定瀏覽器將一行文本分成多行的情況。如果沒有此屬性，太長而無法放入行框的文本字符串將無法斷開并導致溢出。
要使用溢出換行，空白屬性必須允許換行。這意味著必須將white-space屬性設置為“normal”、“pre-wrap”和“break-spaces”或“pre-line”。大多數情況下，您會看到它設置為“正常”。
overflow-wrap屬性可以采用三個值：normal、anywhere或break-word。
當overflow-wrap設置為normal時，一行文本只會在非強制斷點處斷行，例如兩個單詞之間的空格。
當應用任意值時，如果沒有非強制斷點，行可能會在強制斷點處斷。
例如，一個長詞或URL可能會被打斷換行。斷點處不插入連字符。
使用此值，在計算最小內容固有大小（框在不導致溢出的情況下可以采用的最小大小）時，會考慮通過在斷點處換行來最小化溢出一行的內容量的機會。
如果使用break-word值，則在沒有非強制斷點的情況下，行可能會在強制斷點處中斷。斷點處不插入連字符。
但是，在計算最小內容固有大小時（換句話說，一個框在不導致溢出的情況下可以采用的最小大小）不會考慮通過在斷點換行來最小化溢出一行的內容量的機會。
CSS text-overflow屬性控制溢出其容器元素的內聯內容如何在頁面上呈現。
要使用CSS text-overflow屬性，塊容器元素必須由具有visible以外值的overflow屬性定義。大多數情況下，它將被定義為“溢出：隱藏”。容器還必須由white-space屬性定義并設置為“nowrap”。否則，內聯內容將換行到下一行，而不是剪裁。
有兩個CSS text-overflow屬性值，clip和ellipsis。
將CSS text-overflow屬性設置為“clip”將在填充邊緣剪切溢出其塊容器元素的內聯內容。訪問者將無法看到超出裁剪邊緣的內容。
這類似于CSS溢出屬性的“隱藏”值。不同之處在于剪輯禁止任何類型的滾動，包括程序化滾動。這意味著元素的框不是滾動容器。
使用省略號值將在填充邊緣剪切溢出其塊容器元素的內聯內容，并多出一點以適應省略號。
他的值還禁止任何滾動，包括編程滾動，它告訴瀏覽器元素的框不是滾動容器。訪問者將無法看到超出裁剪邊緣的內容。
溢出是一個常見問題，您可能會遇到從頭開始創建布局或自定義預先設計的布局的情況。了解如何控制它將確保您可以在不影響對齊或定位的情況下創建和自定義布局。值得慶幸的是，您只需要一些基本的網頁設計知識即可。
綜上所述，成都小程序設計中讓CSS溢出工作的關鍵是通過合理設置盒模型、溢出屬性和偽元素等方法來控制內容的表現和處理。通過這些技巧和技術手段的應用，我們可以實現更靈活、美觀和易用的網頁設計效果。
