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