关于兼容多浏览器的pre换行


本来是要求助大家来着,但在发这文章的时候,又意外的找到了解决方案,真是天助我也。

关于兼容IE/Firefox/Opera/Safari等浏览器的pre换行,网上流传着一个版本:

pre自动换行(Firefox没通过)

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+ */
}

号称:

该CSS方案可让pre标签内的文本自动换行,我在我有的浏览器上都测试了一下,全部支持,IE6,IE7, IE8, Firefox, Opera, Safari和Chrome。

但经过本人测试,结果并不是那么回事,在firefox下根本不会自动换行。折腾了我好长的时间。

另外还有一个版本:

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

pre{
#word-break: break-all;      /* Internet Explorer 7.0+ */
#word-wrap: break-word;      /* Internet Explorer 7.0+ */
_word-break: break-all;      /* Internet Explorer 6.0- */
_word-wrap: break-word;      /* Internet Explorer 6.0- */
}

跟上面的也是一样,没起啥作用。正在我感到绝望,要发贴求助时,答案出来了。柳暗花明又一村啊!

完美pre自动换行

一种不错的解答方法。原文: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等浏览器。


20条回应:“关于兼容多浏览器的pre换行”