Categorized | WordPress

Tags |

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

Posted on 19 一月 2010 by 柳城 ,阅读 565

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

关于兼容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等浏览器。

转载请注明 : 来源于 关于兼容多浏览器的pre换行 | 柳城

赞助商

18条评论 于 “关于兼容多浏览器的pre换行”

  1. 久酷 久酷 Says:

    这个好 很好,哈哈

    [回复]

  2. A.shun A.shun Says:

    我之前就用第一种,就是因为FF多问题
    现在用滚动条人 [擦汗]

    [回复]

    柳城
    柳城 回复:

    呵呵。。 我也是用第一种的。现在可以换新的了。 :)

    [回复]

  3. evlos evlos Says:

    小邪看着自个儿傻掉了,CSS里加个XML?!额滴个神唉,够牛叉 ~

    [回复]

    柳城
    柳城 回复:

    嘿~ 好不容易搜到的。

    [回复]

  4. 绿程网 绿程网 Says:

    优质文章!解决了重要问题。

    [回复]

  5. 路人假 路人假 Says:

    啊,css里都搞xml啦?这技术好时髦。。。

    [回复]

  6. Blinux Blinux Says:

    柳城很好很强大 [呲牙]

    [回复]

  7. Firm Firm Says:

    学习了,拿走了,好东西。 [可爱]

    [回复]

  8. 百奥博 百奥博 Says:

    用wlw就不会有这个麻烦了。

    [回复]

    柳城
    柳城 回复:

    用wlw不会有这个麻烦? 不会吧.. 这个好像是不关软件的问题..

    [回复]

  9. 苏囧 苏囧 Says:

    值得学习啊。。。

    [回复]

  10. 光卫 光卫 Says:

    CSS调整起来有些费力哦

    [回复]

  11. itlobo itlobo Says:

    很好,学习了.做个标记...

    [回复]

  12. 威海民俗网 威海民俗网 Says:

    个人觉得,加个滚动条也不是什么大不了的事情。

    [回复]

  13. leoo0 leoo0 Says:

    悄悄的学习了。。。

    [回复]

  14. 04js.cn 04js.cn Says:

    不错,很实用 [大兵]

    [回复]

Leave a Reply

广告招租

[强] [握手] [可爱] [ok] [呲牙] :) [偷笑] [流泪] [疑问] [亲亲] [擦汗] [得意] [衰] [可怜] [抱拳] [坏笑] more »

无觅相关文章插件,快速提升流量