连续字符自动换行的解决方案

mseed

文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在两行显示，浏览器会依据类似这样的原则来显示文本。但是由于网页有宽度限制的，连续的超长的字母、数字或标点符号超出其所在区域宽度的限制而导致影响页面视觉，如 例1 所示。这个问题在显示用户输入信息时尤为突出，这里就是要说如何解决这个问题。
在CSS3草案中，对文本的处理新增了两个新属性 word-wrap 和 word-break 来解决这个问题：

• {word-wrap:break-word;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开
• {word-break:break-all;} ： 内容将在边界内换行，如需要则词内换行（word-break）也行发生
  

下面是常见浏览器的支持情况：

1. function fnBreakWordAll(o){
   
2. var o = o || {},
   
3. iWord = o.word || 13,
   
4. iRe = o.re || '[a-zA-Z0-9]',
   
5. bAll = o.all || false,
   
6. sClassName = o.className || 'word-break-all',
   
7. aEls = o.els || (function(){
   
8. var aEls = [],
   
9. aAllEls = document.getElementsByTagName('*'),
   
10. re = new RegExp('(?:^|\\s+)' + sClassName + '(?:\\s+|$)');
    
11. for(var i =0,iLen = aAllEls.length; i < iLen ; ++i){
    
12. if(re.test(aAllEls[i].className)){
    
13. aEls[aEls.length] = aAllEls[i];
    
14. }
    
15. }
    
16. return aEls;
    
17. })() || [],
    
18. fnBreakWord = function(oEl){
    
19. // 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改
    
20. if(!oEl || oEl.nodeType !== 1){
    
21. return false;
    
22. }else if(oEl.currentStyle && typeof oEl.currentStyle.wordWrap==='string'){
    
23. breakWord = function(oEl){
    
24. oEl.runtimeStyle.wordWrap = 'break-word';
    
25. return true;
    
26. }
    
27. return breakWord(oEl);
    
28. }else if(document.createTreeWalker){
    
29. var trim = function (str) {
    
30. str = str.replace(/^\s\s*/, '');
    
31. var ws = /\s/,
    
32. i = str.length;
    
33. while (ws.test(str.charAt(--i)));
    
34. return str.slice(0, i + 1);
    
35. }
    
36. breakWord = function(oEl){
    
37. var dWalker=document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);
    
38. var node,s,c = String.fromCharCode('8203'),
    
39. //re = /([a-zA-Z0-9]{0,13})/;
    
40. re = new RegExp('('+ iRe +'{0,' + iWord + '})');
    
41. while (dWalker.nextNode()){
    
42. node = dWalker.currentNode;
    
43. s = trim(node.nodeValue).split(re).join(c);
    
44. node.nodeValue = s;
    
45. }
    
46. return true;
    
47. }
    
48. return breakWord(oEl);
    
49. }
    
50. };
    
51. for(var i=0,n=aEls.length; i<n; ++i){
    
52. var sUa = navigator.userAgent,
    
53. sTn = aEls[i].tagName.toLowerCase() ;
    
54. if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &&
    
55. (sTn === 'td' || sTn === 'th')) || bAll){
    
56. fnBreakWord(aEls[i]);
    
57. }
    
58. }
    
59. }

复制代码

具体应用请看 演示实例
fnWordBreakAll函数提供一些定制参数，使用方法和参数含义如下：

1. fnWordBreakAll({word:15,re:'[\\w]',all:true});

复制代码

参数	值	说明
word	正整数，默认是13	在这个字数内的单词不会被插入\u8203，印象中超过13个字母的单词不多，这可以保证绝大部分单词不会被打碎
re	正则表达式，默认[a-zA-Z0-9]	单词的正则表达式，用以确定一个单词是哪些字符组成，注意\的转义
all	布尔值，默认false	确定是否在所有的浏览器中执行，默认在Opera和Firefox，以及当class应用在th或td的Safari上执行，这个主要用在.word-break-all没有定义时，会对IE加上样式
className	合法class名，默认word-break-all	执行函数的元素对应属性名

这个函数的核心部分修改自Hedger Wang 整理了一个JavaScript解决方案《Cross Browser Word Breaker》，其利用 document.createTreeWalker 和 split 方法给非IE浏览器的每个字符间加入了&#8203; ，它用在纯中文文本基本上没有什么问题，但是如果你仔细观察他给出的例子就会发现文本中有英文或数字时，虽然解决了换行问题，但是使文本难以阅读，且增大了字符间的间距，所以我在此基础上做了上面的改进。