reword

连续字符⾃动换⾏的解决⽅案

⽂本的排版依据语⾔的不同会有⼀些格式上的要求，⽐如简体中⽂中类似逗号、分号等标点符号不会出现在⼀⾏的开头，对于英⽂来讲就是

⼀个完整单词不会在两⾏显⽰，浏览器会依据类似这样的原则来显⽰⽂本。但是由于⽹页有宽度限制的，连续的超长的字母、数字或标点符

号超出其所在区域宽度的限制⽽导致影响页⾯视觉，如所⽰。这个问题在显⽰⽤户输⼊信息时尤为突出，这⾥就是要说如何解决这个问题。

在中，对⽂本的处理新增了两个新属性和来解决这个问题：

1.{word-wrap:break-word;}：依照亚洲语⾔和⾮亚洲语⾔的⽂本规则，允许在字内换⾏，且允许⾮亚洲语⾔⽂本⾏的任意字内断开

2.{word-break:break-all;}：内容将在边界内换⾏，如需要则词内换⾏（word-break）也⾏发⽣

下⾯是常见浏览器的⽀持情况：

IE6/7[1]Firefox2/3[2]Opera3+Safari9.5+/Chrome

{word-wrap:break-word;}

td元素需设置其宽度

见和

不⽀持不⽀持

不⽀持td元素

见和

{word-break:break-all;}

不⽀持连续的符号

见

不⽀持不⽀持⽀持

[1]在MSDN的中可以看出，IE8会像IE6和IE7⼀样⽀持word-wrap和word-break这两个属性，但我在IE8beta2上测试来看却不⽀持这两

项，由于IE8还处于beta阶段，且我相信IE8最终会⽀持的，所以在页头声明使IE8按照

IE7来解释页⾯是⼀个不错的办法。

[2]Firefox3.1将会⽀持word-wrap属性

由于{word-break:break-all;}导致英⽂和数字可读性严重下降且⽆法使连续符号换⾏，所以{word-wrap:break-word;}是⼀个相对较好的选择。

但⾯对浏览器的如此糟糕⽀持，所以不能不借助JavaScript来解决这个问题，即当浏览器不⽀持CSS解决⽅案时，在连续字符串的适当位置

插⼊​字符（当然还可以⽤和­，这三个字符在浏览器中的⽀持情况请看），这些字符写在浏览器中不会显⽰，却使长字符

串换⾏。具体实现代码如下：

functionfnBreakWordAll(o){

varo=o||{},

iWord=||13,

iRe=||'[a-zA-Z0-9]',

bAll=||fal,

sClassName=ame||'word-break-all',

aEls=||(function(){

varaEls=[],

aAllEls=mentsByTagName('*'),

re=newRegExp('(?:^|s+)'+sClassName+'(?:s+|$)');

for(vari=0,iLen=;i

if((aAllEls[i].className)){

aEls[]=aAllEls[i];

}

}

returnaEls;

})()||[],

fnBreakWord=function(oEl){

//基于/360/dhtml/修改

if(!oEl||pe!==1){

returnfal;

}elif(tStyle&&ap==='string'){

breakWord=function(oEl){

ap='break-word';

returntrue;

}

returnbreakWord(oEl);

}elif(TreeWalker){

vartrim=function(str){

str=e(/^ss*/,'');

varws=/s/,

i=;

while(((--i)));

(0,i+1);

}

breakWord=function(oEl){

vardWalker=TreeWalker(oEl,_TEXT,null,fal);

varnode,s,c=arCode('8203'),

//re=/([a-zA-Z0-9]{0,13})/;

re=newRegExp('('+iRe+'{0,'+iWord+'})');

while(de()){

node=tNode;

s=trim(lue).split(re).join(c);

lue=s;

}

returntrue;

}

returnbreakWord(oEl);

}

};

for(vari=0,n=;i

varsUa=ent,

sTn=aEls[i].rCa();

if((/Opera/).test(sUa)||(/Firefox/).test(sUa)||((/KHTML/).test(sUa)&&

(sTn==='td'||sTn==='th'))||bAll){

fnBreakWord(aEls[i]);

}

}

}

具体应⽤请看

fnWordBreakAll函数提供⼀些定制参数，使⽤⽅法和参数含义如下：

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

参数值说明

word正整数，默认是13

在这个字数内的单词不会被插⼊u8203，印象中超过13个字母的单词不多，这可以保证绝⼤部分单词不

会被打碎

re

正则表达式，默认[a-

zA-Z0-9]

单词的正则表达式，⽤以确定⼀个单词是哪些字符组成，注意的转义

all布尔值，默认fal

确定是否在所有的浏览器中执⾏，默认在Opera和Firefox，以及当class应⽤在th或td的Safari上执⾏，这

个主要⽤在.word-break-all没有定义时，会对IE加上样式

className

合法class名，默认

word-break-all

执⾏函数的元素对应属性名

这个函数的核⼼部分修改⾃HedgerWang整理了⼀个JavaScript解决⽅案，其利⽤和split⽅法给⾮IE浏览器的每个字符间加⼊了​，

它⽤在纯中⽂⽂本基本上没有什么问题，但是如果你仔细观察他给出的例⼦就会发现⽂本中有英⽂或数字时，虽然解决了换⾏问题，但是使

⽂本难以阅读，且增⼤了字符间的间距，所以我在此基础上做了上⾯的改进。