在前端開(kāi)發(fā)中，CSS 折行是一個(gè)經(jīng)常會(huì)被忽略的問(wèn)題。折行是指當(dāng)一個(gè)元素（如一個(gè)長(zhǎng)單詞或 URL）超過(guò)了其容器的寬度時(shí)如何處理。在 CSS 中，通常我們使用 `word-break: break-all;` 或 `word-wrap: break-word;` 屬性來(lái)處理。然而，這些屬性都有其固有的限制，無(wú)法處理所有情況。如果你遇到一個(gè)較復(fù)雜的樣式問(wèn)題，就可能需要一些更先進(jìn)的 CSS 技術(shù)來(lái)解決。 讓我們看一個(gè)實(shí)際例子。假設(shè)我們有一個(gè)超出容器寬度的長(zhǎng)單詞，而 `word-wrap` 或 `word-break` 屬性無(wú)法正確地處理。我們可以使用 `hyphens` 屬性來(lái)手動(dòng)進(jìn)行斷詞： ```

Thisisaverylongwordwhichwillnotfitinthescreenandwedonotwantittobreakunusually.

``` 在該代碼中，我們將 `hyphens` 屬性設(shè)置為 `auto`，告訴瀏覽器嘗試自動(dòng)斷單詞。在這種情況下，單詞被分成兩行，而且分割線是由瀏覽器自動(dòng)生成的。如果你不希望分割線出現(xiàn)，你可以使用 `none` 值。 另外一個(gè)值得注意的地方是，如果你在 `pre` 標(biāo)簽里面使用 `word-wrap` 和 `word-break` 屬性，它們會(huì)失效。這是因?yàn)?`pre` 標(biāo)簽會(huì)保持原本的格式和空格，并且不會(huì)對(duì)文本進(jìn)行處理。如果你需要在 `pre` 標(biāo)簽中進(jìn)行折行，可以使用 `white-space: pre-wrap;` 屬性來(lái)實(shí)現(xiàn)： ```

This is a very long sentence which will not fit in the screen and we do not want it to break unusually.

``` 通過(guò)上述技巧，我們可以避免在容器里面出現(xiàn)折行問(wèn)題，同時(shí)保持文字的可讀性。希望這篇文章能帶給你一些思路和幫助。