在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">需要换行的内容</div>



其中里面有个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>

<!-- Web2 -->







需要说明的是:使用-moz-binding: url('./wordwrap.xml#wordwrap');时,一定要有overflow: hidden;作为辅组,否则无效,具体什么原因嘛,我只能说实践出真理,我也不知道什么原因




最后,再打包给你下载吧

​点击下载此文件​