1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果:可以实现换行

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

 

 

firefox下的一个解决方法:

XBL binding

 

.wordwrap { -moz-binding: url('./wordwrap.xml#wordwrap'); }

 

  wordwrap.xml的内容:

 

			//

 

 

 演示地址:http://ecmascript.stchur.com/blogcode/emulating_word_wrap_take2/

如果要通用的,跨浏览器的解决方案就只能用javascript

 

//aka makeDesignerHappy(dEl);
      function breakWord(dEl){

        if(!dEl || dEl.nodeType !== 1){

          return false;

        } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){

          //Lazy Function Definition Pattern, Peter's Blog
          //From http://peter.michaux.ca/article/3556

          breakWord = function(dEl){
            //For Internet Explorer
            dEl.runtimeStyle.wordBreak = 'break-all';
            return true;
          }

          return breakWord(dEl);

        }else if(document.createTreeWalker){

          //Faster Trim in Javascript, Flagrant Badassery
          //http://blog.stevenlevithan.com/archives/faster-trim-javascript

          var trim = function  (str) {
            str = str.replace(/^ss*/, '');
            var ws = /s/,
            i = str.length;
            while (ws.test(str.charAt(--i)));
            return str.slice(0, i   1);
          }

          //Lazy Function Definition Pattern, Peter's Blog
          //From http://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 will display
              //incorect text-indent with space characters
              s = trim( node.nodeValue ) .split('').join(c);
              node.nodeValue = s;
            }
            return true;
          }

          return breakWord(dEl);

        }else{
          return false;
        }
      }

 

 

以上代码来自下面这个网址: