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瀏覽器的每個字符間加?了​，

它?在純中??本基本上沒有什么問題，但是如果你仔細觀察他給出的例?就會發現?本中有英?或數字時，雖然解決了換?問題，但是使

?本難以閱讀，且增?了字符間的間距，所以我在此基礎上做了上?的改進。