在CSS中如何解決長英文單詞的頁面顯示問題

這篇文章主要介紹了在CSS中如何解決長英文單詞的頁面顯示問題，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

簡言

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

演示程序

42du.cn-在線演示程序

部分html代碼

<div class="block">    <h5>word-break:break-all;</h5>    <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;}

問題

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

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

word-break: break-all;

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

word-wrap: break-word;

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

hyphens: auto;

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享在CSS中如何解決長英文單詞的頁面顯示問題內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!