如何跨浏览器使用连续字符的换行

转自：http://www.planabc.net/2008/07/03/cross_browser_word_breaker/

 

由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。

那如何解决这个问题呢？

在 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 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。

Code
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》