【推薦教程：CSS視頻教程 】

當(dāng)我們使用 CSS 構(gòu)建布局時(shí)，考慮長(zhǎng)短文本內(nèi)容很重要，如果能清楚地知道當(dāng)文本長(zhǎng)度變化時(shí)需要怎么處理，可以避免很多不必要的問(wèn)題。

在許多情況下，添加或刪除一個(gè)單詞會(huì)改變 UI 的外觀，更糟的是，它可能會(huì)破壞原有的設(shè)計(jì)，使其無(wú)法訪問(wèn)。在我學(xué)習(xí) CSS 的早期，我低估了添加或刪除一個(gè)單詞的作用。在本文中，我會(huì)介紹幾種不同的技巧，大家可以馬上使用它們來(lái)處理CSS中不同長(zhǎng)度的文本。

問(wèn)題

在討論處理文本內(nèi)容的技巧之前，先來(lái)解釋一下這個(gè)問(wèn)題，假設(shè)我們有一個(gè)垂直導(dǎo)航。

名字的長(zhǎng)度可以變化，特別是如果你是在一個(gè)多語(yǔ)言網(wǎng)站工作。在上面的示例中，隨著名稱(chēng)變長(zhǎng)，它被包裝到第二行。這里有一些問(wèn)題

• 應(yīng)該把這段文字截短嗎

• 應(yīng)該換成多行嗎？ 如果是，最多可以換行多少行？

這種情況下單詞比預(yù)期的多，但是當(dāng)單詞太長(zhǎng)時(shí)會(huì)發(fā)生什么呢?默認(rèn)情況下，它將溢出其容器。

作為專(zhuān)業(yè)前端開(kāi)發(fā)人員，重要的是要確定在這種情況下應(yīng)該要知道怎么處理。 幸運(yùn)的是，有一些CSS屬性就是專(zhuān)門(mén)用于解決此類(lèi)問(wèn)題。

除此之外，問(wèn)題不僅在于長(zhǎng)內(nèi)容，短內(nèi)容也會(huì)破壞UI，或者至少會(huì)讓它看起來(lái)很奇怪。如下面的示例

帶有ok文本的按鈕的寬度非常小。我并不是說(shuō)這是一個(gè)致命的問(wèn)題，但它會(huì)讓按鈕看起來(lái)很弱或很難被注意到。

在這種情況下我們?cè)撛趺崔k？ 也許在按鈕上設(shè)置min-width？ 無(wú)論內(nèi)容長(zhǎng)度如何，都可以提供安全的寬度。

長(zhǎng)內(nèi)容

在，大家已經(jīng)對(duì)問(wèn)題有所了解，我們接著深入研究CSS 技巧，這些技巧可為處理長(zhǎng)內(nèi)容提供解決方案。

overflow-wrap

CSS 屬性 overflow-wrap 是用來(lái)說(shuō)明當(dāng)一個(gè)不能被分開(kāi)的字符串太長(zhǎng)而不能填充其包裹盒時(shí)，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。

Hyphens

CSS 屬性 hyphens 告知瀏覽器在換行時(shí)如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時(shí)候使用，或者讓瀏覽器決定什么時(shí)候使用。

.element {   hyphens: auto; }

文本截?cái)嗵幚?/h4>

截?cái)嗍侵冈诰渥拥哪┪蔡砑狱c(diǎn)，以表明有