本来是要求助大家来着,但在发这文章的时候,又意外的找到了解决方案,真是天助我也。
关于兼容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换行”
这个好 很好,哈哈
非常好。 [呲牙]
我之前就用第一种,就是因为FF多问题
现在用滚动条人 [擦汗]
呵呵。。 我也是用第一种的。现在可以换新的了。 :)
小邪看着自个儿傻掉了,CSS里加个XML?!额滴个神唉,够牛叉 ~
嘿~ 好不容易搜到的。
优质文章!解决了重要问题。
啊,css里都搞xml啦?这技术好时髦。。。
柳城很好很强大 [呲牙]
学习了,拿走了,好东西。 [可爱]
用wlw就不会有这个麻烦了。
用wlw不会有这个麻烦? 不会吧.. 这个好像是不关软件的问题..
值得学习啊。。。
CSS调整起来有些费力哦
很好,学习了.做个标记…
个人觉得,加个滚动条也不是什么大不了的事情。
悄悄的学习了。。。
不错,很实用 [大兵]
郁闷,还是没有解决问题。
没用对。 我百试试灵。