HTML容器内文字自动折行

在FF中连续英文文本不会自动折行,需要用JavaScript来控制,现在发现这个需求用得还挺广泛,恰好觅到一个使用方便但绝不简单的JavaScript函数,兼容所有浏览器,记之。

功能:
JS函数自动获取容器的大小,把容器内的文字(可为中英文混编)自动排版折行。

使用方法:
// 1. 如果要折行的地方少,就直接把要折行的容器标签传参。


// 2.如果要折行的地方多,就给要折行的容器标签都加个样式2zingfold(当然样式名可变)

// 3.引用JQUERY下的方式,当然JQ库文件必须路径正确文件无误才有效果

/注意:JS应用代码要放在要应用的HTML标签加载完毕之后,建议紧挨着放在</body>前


函数代码:
<script language="javascript" 
type="text/javascript" >

  //aka makeDesignerHappy(dEl);
  function breakWord(dEl){
      if(!dEl ||dEl.nodeType !== 1){
        return false;
      } elseif(dEl.currentStyle && typeofdEl.currentStyle.wordBreak === 'string'){
        //Lazy Function Definition Pattern, Peter'sBlog
        //Fromhttp://peter.michaux.ca/article/3556
        breakWord = function(dEl){
            //ForInternet Explorer
            dEl.runtimeStyle.wordBreak = 'break-all';
            returntrue;
        }
        return breakWord(dEl);
      }elseif(document.createTreeWalker){
        //Faster Trim in Javascript, FlagrantBadassery
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript
        var trim = function  (str){
            str =str.replace(/^\s\s*/, '');
            var ws =/\s/,
            i =str.length;
            while(ws.test(str.charAt(--i)));
            returnstr.slice(0, i + 1);
        }
        //Lazy Function Definition Pattern, Peter'sBlog
        //Fromhttp://peter.michaux.ca/article/3556
        breakWord = function(dEl){
            //For Opera,Safari, and Firefox
            var dWalker= document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null,false);
            var node,s,c= String.fromCharCode('8203');
            while(dWalker.nextNode())
            {
              node = dWalker.currentNode;
              //we need to trim String otherwise Firefox willdisplay
              //incorect text-indent with spacecharacters
              s = trim( node.nodeValue ).split('').join(c);
              node.nodeValue = s;
            }
            returntrue;
        }
        return breakWord(dEl);
      }else{
        return false;
      }
  }
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值