本篇內(nèi)容介紹了“CSS長英文單詞的頁面顯示問題如何解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、且末網(wǎng)站維護(hù)、網(wǎng)站推廣。
簡言
在頁面排版中，經(jīng)常遇到長英文單詞溢出段落容器的情況，如何解決該問題？現(xiàn)編制如下對比演示程序：
演示程序
42du.cn-在線演示程序
部分html代碼
word-break:break-all;
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)情況下，如果單詞排版到了容器邊界，該單詞會被自動移到下一行中顯示。而如果單個單詞的長度大于容器寬度時，就會產(chǎn)生溢出容器邊界的情況。見文中演示的第一部分，頁面上Extraordinarily長度溢出了容器邊界。
在CSS中提到單詞斷行，自然就會想到word-break和word-wrap。具體差別對比，在演示的第二和第三部分對比可以看出來。
word-break:break-all;
上述聲明，如演示第二部分所示。單詞排版到了容器邊界，該單詞就會被斷開成兩部分，后一部分移到下一行顯示。這樣排版段落的右邊很整齊，我喜歡這種效果。但break-all會造成很多行末單詞斷開，影響閱讀體驗。
word-wrap:break-word;
上述聲明，如演示第三部分所示。單詞排版到了容器邊界，優(yōu)先把單詞移到下一行顯示。而當(dāng)單詞長度超過行寬度時，再斷開單詞。即優(yōu)先行內(nèi)斷開，行內(nèi)斷開不靈時、再采用單詞斷開。這樣排版段落右側(cè)不夠整齊、有留白產(chǎn)生，但不會造成大量單詞被斷開、也不會產(chǎn)生溢出。
hyphens:auto;
上述聲明，如演示第四部分所示。如果更深入一步，想給斷開的單詞加一個連字符（-），可以采用hyphens:auto。但是目前該項聲明的兼容性很差。
“CSS長英文單詞的頁面顯示問題如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
重慶分公司
重慶分公司
