簡言
在頁面排版中，經常遇到長英文單字溢出段落容器的情況，如何解決該問題？現編制如下比較示範程式：
示範程式
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;}問題
#在進行英文段落排版中，常常會碰到長英文單字的情況，一般在預設情況下，如果單字排版到了容器邊界，該單字會被自動移到下一行中顯示。而如果單字的長度大於容器寬度時，就會產生溢出容器邊界的情況。請參閱文中示範的第一部分，頁面上Extraordinarily長度溢出了容器邊界。
在CSS中提到單字斷行，自然就會想到word-break和word-wrap。具體差別對比，在演示的第二和第三部分對比可以看出來。
word-break: break-all;
上述聲明，如示範第二部分所示。單字排版到了容器邊界，該單字就會被斷開成兩部分，後一部分移到下一行顯示。這樣排版段落的右邊很整齊，我喜歡這種效果。但break-all會造成許多行末單字斷開，影響閱讀體驗。
word-wrap: break-word;
上述聲明，如示範第三部分所示。單字排版到了容器邊界，優先把單字移到下一行顯示。而當單字長度超過行寬度時，再斷開單字。即優先行內斷開，行內斷開不靈時、再採用單字斷開。這樣排版段落右側不夠整齊、有留白產生，但不會造成大量單字被斷開、也不會產生溢出。
hyphens: auto;
上述聲明，如示範第四部分所示。如果更深入一步，想為斷開的單字加一個連字號（-），可以採用hyphens: auto。但是目前該項聲明的兼容性很差。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是怎樣在CSS中解決長英文單字的頁面顯示問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
