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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果：可以实现换行

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

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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

 

 

firefox下的一个解决方法:

XBL binding

 

Css代码 

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

 wordwrap.xml的内容:

Xml代码 

1. <?xml version = "1.0"?>  
2.   
3. <bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">  
4.   
5. <binding id = "wordwrap" applyauthorstyles = "false">  
6.   
7.     <implementation>  
8.         <constructor>  
9.             //<![CDATA[ 
10.              
11.             var elem = this; 
12.              
13.             doWrap(); 
14.             elem.addEventListener('overflow', doWrap, false); 
15.              
16.             function doWrap() 
17.             { 
18.                 var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); 
19.                 while (walker.nextNode()) 
20.                 { 
21.                     var node = walker.currentNode; 
22.                     node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203')); 
23.                 } 
24.             } 
25.   
26.  
27.             //]]>  
28.         </constructor>  
29.     </implementation>  
30.   
31. </binding>  
32.   
33. </bindings>  
34. <!-- Web2 -->  

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

 

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

 

Js代码 

1. //aka makeDesignerHappy(dEl);  
2.       function breakWord(dEl){  
3.           
4.           
5.         if(!dEl || dEl.nodeType !== 1){  
6.             
7.           return false;  
8.           
9.         } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){  
10.             
11.           //Lazy Function Definition Pattern, Peter's Blog  
12.           //From http://peter.michaux.ca/article/3556  
13.             
14.           breakWord = function(dEl){  
15.             //For Internet Explorer  
16.             dEl.runtimeStyle.wordBreak = 'break-all';  
17.             return true;  
18.           }  
19.             
20.           return breakWord(dEl);  
21.            
22.         }else if(document.createTreeWalker){  
23.          
24.           //Faster Trim in Javascript, Flagrant Badassery  
25.           //http://blog.stevenlevithan.com/archives/faster-trim-javascript  
26.             
27.           var trim = function  (str) {  
28.             str = str.replace(/^/s/s*/, '');  
29.             var ws = //s/,  
30.             i = str.length;  
31.             while (ws.test(str.charAt(--i)));  
32.             return str.slice(0, i + 1);  
33.           }  
34.             
35.           //Lazy Function Definition Pattern, Peter's Blog  
36.           //From http://peter.michaux.ca/article/3556  
37.             
38.           breakWord = function(dEl){  
39.               
40.             //For Opera, Safari, and Firefox  
41.             var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);  
42.             var node,s,c = String.fromCharCode('8203');  
43.             while (dWalker.nextNode())  
44.             {  
45.               node = dWalker.currentNode;  
46.               //we need to trim String otherwise Firefox will display   
47.               //incorect text-indent with space characters  
48.               s = trim( node.nodeValue ) .split('').join(c);  
49.               node.nodeValue = s;  
50.             }  
51.             return true;  
52.           }  
53.             
54.           return breakWord(dEl);  
55.             
56.             
57.         }else{  
58.           return false;  
59.         }  
60.       }  
61.         

 

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

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