突然間發(fā)覺(jué)自己一直以來(lái)都是用以前的思維方式在寫頁(yè)面，很多細(xì)節(jié)的東西并未注意到。前幾天組內(nèi)有同學(xué)問(wèn)我關(guān)于單字節(jié)的長(zhǎng)字符截?cái)鄦?wèn)題，原以為很簡(jiǎn)單的只要用word-break:break-all;和word-wrap:break-word;就能解決所有問(wèn)題了。事實(shí)上這個(gè)的確能讓長(zhǎng)字符的單字節(jié)文本在塊元素中被截?cái)唷?/p>

雖然是被截?cái)嗔耍?xì)節(jié)的問(wèn)題還是存在，比如一個(gè)單詞不希望被截?cái)嗟臅r(shí)候也被截?cái)嗔耍@樣就悲催了。如圖：

正常來(lái)說(shuō)，一個(gè)英文單詞再怎么樣也不太可能會(huì)非常非常的長(zhǎng)，一般都是測(cè)試人員在做頁(yè)面測(cè)試的時(shí)候，使用了很長(zhǎng)很長(zhǎng)的單字節(jié)連續(xù)的字符，才會(huì)出現(xiàn)這樣的問(wèn)題。那么如果這個(gè)時(shí)候把word-break:break-all;換成word-break:keep-all;的話，情況又會(huì)改變了，如圖：

單詞能正常顯示，而很長(zhǎng)的長(zhǎng)字符就會(huì)被強(qiáng)制換行了。上面兩張截圖是來(lái)自 Chrome 20.0.1132.57 m 版本的瀏覽器，如果在FF和IE中查看的話，IE這神奇的寶貝又出現(xiàn)了一個(gè)情況，中文字符中，以標(biāo)點(diǎn)符號(hào)為基準(zhǔn)來(lái)強(qiáng)制換行，如果沒(méi)有標(biāo)點(diǎn)符號(hào)的話，那么又一切正常，如圖：

這個(gè)時(shí)候我已經(jīng)開(kāi)始迷惑了，到底應(yīng)該是用哪個(gè)好呢？正常來(lái)說(shuō)我們肯定是希望單詞能正常換行而不是強(qiáng)制被斷行，如果是這樣的話，我們就應(yīng)該是使用word-break:keep-all;和word-wrap:break-word;的組合，但這樣的話，IE瀏覽器的換行實(shí)在是太過(guò)于可怕了，糾結(jié)啊。

思前想后，這個(gè)還是以文本能正常被截?cái)啵€是放棄IE這個(gè)鳥(niǎo)玩意，斷行就用word-wrap:break-word;這樣一個(gè)算了吧，使用word-wrap:break-word;這個(gè)的話，各個(gè)瀏覽器都支持強(qiáng)制換行，如果遇到空格或者標(biāo)點(diǎn)符號(hào)也會(huì)換行，一切都是那么滴完美。 (^。^)y-~~

結(jié)合http://lab.linxz.de/word_break.html這個(gè)工具來(lái)使用的。

轉(zhuǎn)自：小志博客 原文：在word-wrap和word-break之間的糾結(jié)關(guān)于文本斷行的樣式

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。