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