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

From 柳城 on 2010-01-19 17:33:20

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

关于兼容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换行

From 久酷 on 2010-01-19 18:25:54

这个好很好,哈哈

From A.shun on 2010-01-19 18:27:03

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

From evlos on 2010-01-19 19:02:19

小邪看着自个儿傻掉了，CSS里加个XML？！额滴个神唉，够牛叉 ~

From 柳城 on 2010-01-19 20:07:44

非常好。 [呲牙]

From 柳城 on 2010-01-19 20:08:25

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

From 柳城 on 2010-01-19 20:08:50

嘿~ 好不容易搜到的。

From 绿程网 on 2010-01-19 21:06:37

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

From 路人假 on 2010-01-19 23:12:15

啊，css里都搞xml啦？这技术好时髦。。。

From Blinux on 2010-01-20 09:55:13

柳城很好很强大 [呲牙]

From Firm on 2010-01-21 00:27:01

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

From 百奥博 on 2010-01-21 15:10:32

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

From 柳城 on 2010-01-22 08:22:28

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

From 苏囧 on 2010-01-22 15:31:40

值得学习啊。。。

From 光卫 on 2010-01-22 16:06:52

CSS调整起来有些费力哦

From itlobo on 2010-01-26 10:52:40

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

From 威海民俗网 on 2010-05-12 17:49:16

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

From leoo0 on 2010-05-13 00:31:38

悄悄的学习了。。。

From 04js.cn on 2010-06-30 17:43:23

不错，很实用 [大兵]

Tags: pre换行

柳城.Name's Archivers