css word-break 和 word-wrap自動換行詳解

突然間發覺自己一直以來都是用以前的思維方式在寫頁面，很多細節的東西並未注意到。雖然是被截斷了，但細節的問題還是存在，比如一個單詞不希望被截斷的時候也被截斷了，這樣就悲催了。

正常來說，一個英文單詞再怎麼樣也不太可能會非常非常的長，一般都是測試人員在做頁面測試的時候，使用了很長很長的單位元組連續的字元，才會出現這樣的問題。那麼如果這個時候把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-~~

下面這個是我測試時使用的HTML代碼結構

<div class="word_break">文字啊文字，這裡其實就是文字，想要更多的文字，那就開始複製……文字啊文字，這裡其實就是文字，想要更多的文字，那就開始複製……文字啊文字，這裡其實就是文字，想要更多的文字，那就開始複製……假如這裡的文字內容是很長很長的話又沒有標點符號的話那將會是怎麼樣的效果呢。結束！</div>

代碼如下	複製代碼
<div class="word_break">test text txt word copy now! test texttexttexttexttext txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! </div> <div class="word_break">assssssssssssssssssssssssssssssssssssssssss333333333

代碼如下	複製代碼
412341234adsfadfzxcvzcvdfgfnasdfadzvasdf234234adfvczx

代碼如下	複製代碼
cvasdfasdf234adfzszxcvasdfasdf234234234azcvasdfad

代碼如下	複製代碼
fasdf234adfasdf</div>

 

然後這個是CSS代碼，這部分的代碼是結合word-break 和 word-wrap 在各個瀏覽器中的效果 用力點擊藍色文字

 

這段代碼

代碼如下	複製代碼
.word_break {float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun;border:1px solid #242424;zoom:1;}