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 />遇到标签第二个会做相反的事情：即使在一个字的中间，也可以在必要的时候打破话语。他们似乎在冲突，最明显的答案是为什么不同的浏览器对这些属性的反应是不同的

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

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

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

[编辑]

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

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 */

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

原文地址：https://www.jb51.cc/css/218857.html