CSS 允許我們輕松實(shí)現(xiàn)英文的自動(dòng)換行。

在 CSS 中，我們使用word-wrap屬性來(lái)控制自動(dòng)換行的行為。

該屬性有兩個(gè)取值：

word-wrap: normal; /* 默認(rèn)值，不允許單詞換行 */
word-wrap: break-word; /* 允許單詞換行 */

為了更好地理解這兩個(gè)值的區(qū)別，我們可以編寫(xiě)如下的 CSS 代碼：

p.normal {
word-wrap: normal;
}
p.break-word {
word-wrap: break-word;
}

然后在 HTML 中添加下面的代碼：

<p class="normal">The quick brown fox jumps over the lazy dog.</p>
<p class="break-word">The quick brown fox jumps over the lazy dog.</p>

結(jié)果，我們會(huì)發(fā)現(xiàn)第一個(gè)段落沒(méi)有發(fā)生自動(dòng)換行，而第二個(gè)段落則自動(dòng)折行了。

需要注意的是，word-wrap屬性在某些瀏覽器中可能不受支持，這時(shí)我們可以使用overflow-wrap屬性作為替代。這個(gè)屬性的取值和word-wrap一模一樣！