突然間發覺自己一直以來都是用以前的思維方式在寫頁面，很多細節的東西并未注意到。前幾天組內有同學問我關于單字節的長字符截斷問題，原以為很簡單的只要用word-break:break-all;和word-wrap:break-word;就能解決所有問題了。事實上這個的確能讓長字符的單字節文本在塊元素中被截斷。

雖然是被截斷了，但細節的問題還是存在，比如一個單詞不希望被截斷的時候也被截斷了，這樣就悲催了。如圖：

正常來說，一個英文單詞再怎么樣也不太可能會非常非常的長，一般都是測試人員在做頁面測試的時候，使用了很長很長的單字節連續的字符，才會出現這樣的問題。那么如果這個時候把word-break:break-all;換成word-break:keep-all;的話，情況又會改變了，如圖：

單詞能正常顯示，而很長的長字符就會被強制換行了。上面兩張截圖是來自 Chrome 20.0.1132.57 m 版本的瀏覽器，如果在FF和IE中查看的話，IE這神奇的寶貝又出現了一個情況，中文字符中，以標點符號為基準來強制換行，如果沒有標點符號的話，那么又一切正常，如圖：

這個時候我已經開始迷惑了，到底應該是用哪個好呢？正常來說我們肯定是希望單詞能正常換行而不是強制被斷行，如果是這樣的話，我們就應該是使用word-break:keep-all;和word-wrap:break-word;的組合，但這樣的話，IE瀏覽器的換行實在是太過于可怕了，糾結啊。

思前想后，這個還是以文本能正常被截斷，還是放棄IE這個鳥玩意，斷行就用word-wrap:break-word;這樣一個算了吧，使用word-wrap:break-word;這個的話，各個瀏覽器都支持強制換行，如果遇到空格或者標點符號也會換行，一切都是那么滴完美。 (^。^)y-~~

結合http://lab.linxz.de/word_break.html這個工具來使用的。

轉自：小志博客 原文：在word-wrap和word-break之間的糾結關于文本斷行的樣式

總結

以上是生活随笔為你收集整理的关于文本断行的样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。