FF 特有换行 类似于word-break:keep-all;

 

因为火狐识别word-break 所以此为火狐特有换行

下面是关于此问题的文章

我试过了 已经调通

css强制换行问题

关键字: css, 换行

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的内容:

xml version = "1.0"?>

<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">

<binding id = "wordwrap" applyauthorstyles = "false">

    <implementation>
        <constructor>
            //

            var elem = this;

            doWrap();
            elem.addEventListener('overflow', doWrap, false);

            function doWrap()
            {
                var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
                while (walker.nextNode())
                {
                    var node = walker.currentNode;
                    node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
                }
            }


            //]]>
        constructor>
    implementation>

binding>

bindings>

 演示地址: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(/^/s/s*/, '');
            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;
        }
      }

 

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

http://www.hedgerwow.com/360/dhtml/css-word-break.html