簡(jiǎn)言

在頁(yè)面排版中，經(jīng)常遇到長(zhǎng)英文單詞溢出段落容器的情況，如何解決該問(wèn)題？現(xiàn)編制如下對(duì)比演示程序：

演示程序

42du.cn-在線演示程序

部分html代碼

<div class="block">
    <h4>word-break:break-all;</h4>
    <p class="break-all">Extraordinarily longlong word!</p>
</div>

CSS代碼

  .break-all {
    word-break: break-all;
}
.break-word {
    word-wrap: break-word;
}
.hyphens {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}     

運(yùn)行結(jié)果

Firefox 58運(yùn)行結(jié)果如下：

運(yùn)行效果圖

問(wèn)題

在進(jìn)行英文段落排版中，常常會(huì)碰到長(zhǎng)英文單詞的情況，一般在默認(rèn)情況下，如果單詞排版到了容器邊界，該單詞會(huì)被自動(dòng)移到下一行中顯示。而如果單個(gè)單詞的長(zhǎng)度大于容器寬度時(shí)，就會(huì)產(chǎn)生溢出容器邊界的情況。見(jiàn)文中演示的第一部分，頁(yè)面上Extraordinarily長(zhǎng)度溢出了容器邊界。

在CSS中提到單詞斷行，自然就會(huì)想到word-break和word-wrap。具體差別對(duì)比，在演示的第二和第三部分對(duì)比可以看出來(lái)。

word-break: break-all;

上述聲明，如演示第二部分所示。單詞排版到了容器邊界，該單詞就會(huì)被斷開(kāi)成兩部分，后一部分移到下一行顯示。這樣排版段落的右邊很整齊，我喜歡這種效果。但break-all會(huì)造成很多行末單詞斷開(kāi)，影響閱讀體驗(yàn)。

word-wrap: break-word;

上述聲明，如演示第三部分所示。單詞排版到了容器邊界，優(yōu)先把單詞移到下一行顯示。而當(dāng)單詞長(zhǎng)度超過(guò)行寬度時(shí)，再斷開(kāi)單詞。即優(yōu)先行內(nèi)斷開(kāi)，行內(nèi)斷開(kāi)不靈時(shí)、再采用單詞斷開(kāi)。這樣排版段落右側(cè)不夠整齊、有留白產(chǎn)生，但不會(huì)造成大量單詞被斷開(kāi)、也不會(huì)產(chǎn)生溢出。

hyphens: auto;

上述聲明，如演示第四部分所示。如果更深入一步，想給斷開(kāi)的單詞加一個(gè)連字符（-），可以采用hyphens: auto。但是目前該項(xiàng)聲明的兼容性很差。

想更多了解連字符相關(guān)內(nèi)容，請(qǐng)移步至MDN或CSS-Tricks。