让Firefox支持pre标签内的断词换行

2011 1 17 10:32 PM 2149次查看

分类：CSS 标签：CSS

曾经有网友指出我的代码高亮插件有问题，一行过长时，Firefox下会超出容器。当时我想也没想，就告诉他这是Firefox的遗留问题。
不过今天突然想起Firefox也支持word-wrap:break-word了，那么必然还有其他的原因。

于是我测试了一番，发现p元素能正常断词换行，但pre就不行了。用firebug检查了一下，发现是white-space的差异，前者的值是normal，后者是pre。可是这里我不能简单地改成normal，不然就没法正确显示空格和换行了。
Google了一番后发现一篇《Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE》，原来CSS 3里提供了pre-wrap这个值，而且Firefox 3.5已经支持它了。
至于Chrome、Safari和Opera更是无需更改也能正确换行，改了后也没感觉有什么差异。不过要兼容老浏览器的话，也可以写上-moz-pre-wrap、-pre-wrap和-o-pre-wrap这些私有值。

0条评论 你不来一发么↓

    想说点什么呢？