css – 浏览器兼容的word wrap和whitespace:pre?

前端之家收集整理的这篇文章主要介绍了css – 浏览器兼容的word wrap和whitespace:pre?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要一个div内的文本来保存并包装。到目前为止,我遇到困难的时候想出了一个解决方案。我能够找到的最佳解决方案对所有浏览器都无效。

以下工作在Chrome和IE6中,但在Firefox中,文本未包装。

white-space: pre; 
 word-wrap: break-word;

我发现,无论什么原因,文本不会在Firefox中包含空格:pre。而-moz-pre-wrap在Firefox 3.5中不起作用(为什么?),只能预先包装。但是当我添加预包装到列表中时,IE 6和7不起作用。很沮丧

代码

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre; 
  word-wrap: break-word;
}

解决方法

CSS3属性并不总是能像我们想要的那样工作:)。
不过,我并没有看到混合白色空间的一点:pre和word-wrap:break-word。

前者不会包含文本,除非< br />遇到标签第二个会做相反的事情:即使在一个字的中间,也可以在必要的时候打破话语。他们似乎在冲突,最明显的答案是为什么不同的浏览器对这些属性的反应是不同的

>他们支持两个属性之一
>因为它们是冲突的,所以每个浏览器的优先级是不确定的或不同的

(我不能确定,我在这里不是一个专家)。

我建议你仔细看看thisthis,然后决定在你的具体情况下应该使用什么。

[编辑]

你可能想尝试这个(应该在所有浏览器中工作):

white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* ancient Opera */
white-space: -o-pre-wrap; /* newer Opera */
white-space: pre-wrap; /* Chrome; W3C standard */
word-wrap: break-word; /* IE */

我没有测试过,但我相信它应该为你做的伎俩。

猜你在找的CSS相关文章