1. 程式人生 > >[轉]相容IE firefox(FF下不認word-break及word-wrap),解決文字溢位的問題

[轉]相容IE firefox(FF下不認word-break及word-wrap),解決文字溢位的問題

在IE裡實現文字換行只要使用word-wrap:break-word;word-break:break-all;就可以了,但是它在firefox裡是不認的。在網上查了好久都沒有發現在firefox下很好的解決辦法,比較多的就是用js實現~
後來終於找到一篇文章,比較詳細的介紹了文字換行的方法。地址是 http://fancy.ifcare.net/web/word-wrapword-break.html
其中在firefox下解決換行難題的除了JS方法外,還有個國外的經典解決辦法。詳細內容可以見 http://ecmascript.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

 
演示可以看:http://ecmascript.stchur.com/blogcode/emulating_word_wrap/ (在firefox下演示)
此方法使用的是firefox裡呼叫一個XML現實將文字填充​來解決的辦法。具體​有什麼作用你可以看看作者原文。
我總結後寫了一個CSS,可以在IE和firefox下都能實現換行

程式程式碼 <style type="text/css">
.wordwrap
{
     word-wrap:break-word;
     word-break:break-all;
    -moz-binding: url('./wordwrap.xml#wordwrap');
     overflow: hidden;
}
</style>

當然,在呼叫前你首先要給你那容器一個寬度值,例如<div style="width:100px" class="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>
             //<![CDATA[            
             var elem = this;
             elem.addEventListener('overflow',
                 function()
                 {
                     var exp = /<​//*[​_/s="'/w]+>/g;                    
                     var txt = elem.innerHTML;
                     var chars = txt.split('');
                     var newTxt = chars.join('​');                    
                     newTxt = newTxt.replace(exp, reconstructTag);                    
                     elem.innerHTML = newTxt;
                 },false);                
                 function reconstructTag(_tag)
                 {
                     return _tag.replace(/​/g, '');
                 }
             //]]>
         </constructor>
     </implementation>
</binding>
</bindings>

需要說明的是:使用-moz-binding: url('./wordwrap.xml#wordwrap');時,一定要有overflow: hidden;

*有個問題,這個函式會在每個字元後面加一個&#8203;有時候如果內容中有&nbsp;這種處理方式會將"&nbsp;"顯示出來,而不是顯示出空格。