存档

文章标签 ‘wrap’

兼容IE/Firefox/Opera/Safari等浏览器的pre换行

2010年4月24日 2 条评论 301 views

原文:Firefox下自动换行的解决方案

首先创建wordwrap.xml, 内容如下

<?xml version="1.0" encoding="UTF-8"?>  
<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;  
            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>

然后css pre里改为:

 pre {
  white-space:pre-wrap; /* css-3 */
  white-space:-moz-pre-wrap; /* Mozilla, since 1999 */
  white-space:-pre-wrap; /* Opera 4-6 */
  white-space:-o-pre-wrap; /* Opera 7 */
  word-wrap:break-word; /* Internet Explorer 5.5+ */
  -moz-binding: url('./wordwrap.xml#wordwrap'); /* 再多这行 */
  }

强大.. 完美解决了pre换行,兼容IE/Firefox/Opera/Safari等浏览器。

分类: Web 标签: , , ,