秦歌(yankaven) 的站點：http://dancewithnet.com/

文本的排版依據(jù)語言的不同會有一些格式上的要求，比如簡體中文中類似逗號、分號等標點符號不會出現(xiàn)在一行的開頭，對于英文來講就是一個完整單詞不會在兩行顯示，瀏覽器會依據(jù)類似這樣的原則來顯示文本。但是由于網頁有寬度限制的，連續(xù)的超長的字母、數(shù)字或標點符號超出其所在區(qū)域寬度的限制而導致影響頁面視覺，如 例1 所示。這個問題在顯示用戶輸入信息時尤為突出，這里就是要說如何解決這個問題。

在css3草案中，對文本的處理新增了兩個新屬性 word-wrap 和 word-break 來解決這個問題：

1. {word-wrap:break-word;} ：依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內換行，且允許非亞洲語言文本行的任意字內斷開
2. {word-break:break-all;} ： 內容將在邊界內換行，如需要則詞內換行（word-break）也行發(fā)生

下面是常見瀏覽器的支持情況：

由于{word-break:break-all;}導致英文和數(shù)字可讀性嚴重下降且無法使連續(xù)符號換行，所以{word-wrap:break-word;}是一個相對較好的選擇。

但面對瀏覽器的如此糟糕支持，所以不能不借助javascript來解決這個問題，即當瀏覽器不支持css解決方案時，在連續(xù)字符串的適當位置插入&#8203;字符（當然還可以用<wbr>和&shy;，這三個字符在瀏覽器中的支持情況請看ppk的《the wbr tag》），這些字符寫在瀏覽器中不會顯示，卻使長字符串換行。具體實現(xiàn)代碼如下：

function fnbreakwordall(o){
var o = o || {},
  iword = o.word || 13,
  ire = o.re || '[a-za-z0-9]',
  ball = o.all || false,
  sclassname = o.classname || 'word-break-all',
  aels = o.els || (function(){
    var aels = [],
      aallels = document.getelementsbytagname('*'),
      re = new regexp('(?:^|//s+)' + sclassname + '(?://s+|$)');
    for(var i =0,ilen = aallels.length; i < ilen ; ++i){
      if(re.test(aallels[i].classname)){
        aels[aels.length] = aallels[i];
      }
    }
    return aels;
  })() || [],
  fnbreakword = function(oel){
    // 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改
    if(!oel || oel.nodetype !== 1){
      return false;
    }else if(oel.currentstyle && typeof oel.currentstyle.wordwrap==='string'){
      breakword = function(oel){
        oel.runtimestyle.wordwrap = 'break-word';
        return true;
      }
      return breakword(oel);
    }else if(document.createtreewalker){
      var trim = function  (str) {
        str = str.replace(/^/s/s*/, '');
        var ws = //s/,
        i = str.length;
        while (ws.test(str.charat(--i)));
        return str.slice(0, i + 1);
      }
      breakword = function(oel){
        var dwalker=document.createtreewalker(oel,nodefilter.show_text,null,false);
        var node,s,c = string.fromcharcode('8203'),
          //re = /([a-za-z0-9]{0,13})/;
          re = new regexp('('+ ire +'{0,' + iword + '})');
        while (dwalker.nextnode()){
          node = dwalker.currentnode;
          s = trim(node.nodevalue).split(re).join(c);
          node.nodevalue = s;
        }
        return true;
      }
      return breakword(oel);
    }
  };
for(var i=0,n=aels.length; i<n; ++i){
  var sua = navigator.useragent,
    stn = aels[i].tagname.tolowercase() ;
  if((/opera/).test(sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
  (stn === 'td' || stn === 'th')) || ball){
    fnbreakword(aels[i]);
  }
}
}

fnwordbreakall函數(shù)提供一些定制參數(shù)，使用方法和參數(shù)含義如下：

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

這個函數(shù)的核心部分修改自hedger wang 整理了一個javascript解決方案《cross browser word breaker》，其利用 document.createtreewalker 和 split 方法給非ie瀏覽器的每個字符間加入了&#8203; ，它用在純中文文本基本上沒有什么問題，但是如果你仔細觀察他給出的例子就會發(fā)現(xiàn)文本中有英文或數(shù)字時，雖然解決了換行問題，但是使文本難以閱讀，且增大了字符間的間距，所以我在此基礎上做了上面的改進。