快速业务通道

word-wrap和word-break解决连续字符自动换行

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04

秦歌(YanKaven) 的站点http://dancewithnet.com/

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

在CSS3草案中,对文本的处理新增了两个新属性 word-wrap 和 word-break 来解决这个问题:

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

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

  IE Firefox Opera Safari/Chrome
{word-wrap:break-word;} td元素需设置其宽度
见 例4 和 例5
不支持 不支持 不支持td元素
见 例4 和 例5
{word-break:break-all;} 不支持连续的符号
见例3
不支持 不支持 支持

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

但面对浏览器的如此糟糕支持,所以不能不借助JavaScript来解决这个问题,即当浏览器不支持CSS解决方案时,在连续字符串的适当位置插入&#8203;字符(当然还可以用<wbr>和&shy;,这三个字符在浏览器中的支持情况请看ppk的《The wbr tag》),这些字符写在浏览器中不会显示,却使长字符串换行。具体实现代码如下:

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]);
  }
}
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号