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