如何跨瀏覽器使用連續字符的換行

原文鏈接 作者：懌飛 

由於連續的字符（字母、符號、數字）在默認情況下是不換行的，可能會破壞整個界面佈局。

那如何解決這個問題呢？

在 IE 和 Safari 1.3+ 下相對比較容易解決，使用 CSS 屬性 word-wrap: break-word;。有朋友會問爲什麼不是使用 word-break:break-all; ，因爲有一個特殊的情況，該屬性無法解決換行——連續的英文標點符號。

注：word-break 主要使用在 CJK 文本，即：中文（Chinese）、日文（Japanese）、韓文（Korean）。

而 Firefox 和 Opera 瀏覽器，無法識別 word-wrap: break-word; 和 word-break:break-all; 屬性。可以通過腳本給連續字符的每個字符之間插入 / u8203 的字符（該字符在非 IE 瀏覽下不佔據空間），使連續變爲了不連續，達到了換行的效果。

breakWord = function(dEl){
    var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
    var node,s,c = String.fromCharCode('8203');
    while (dWalker.nextNode()){
        node = dWalker.currentNode;
        s = trim( node.nodeValue ) .split('').join(c);
        node.nodeValue = s;
    }
    return true;
}

詳細的腳本，可參看 Hedger Wang 整理的腳本《Cross Browser Word Breaker》

對於 Firefox ，你還可以通過 XBL bindings 來實現此效果：《Emulating CSS word-wrap for Mozilla/Firefox》