css - 浏览器兼容的自动换行和空格 : pre?

Question

我需要保留和换行 div 中的文本。到目前为止，我很难想出解决方案。我能够找到的最佳解决方案并不适用于所有浏览器。

以下内容适用于 Chrome 和 IE6+，但在 Firefox 中文本不换行。

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

我发现无论出于何种原因，文本在 Firefox 中都没有用 white-space: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;
}

Answer 1

CSS3 属性并不总是像我们希望的那样工作:)。不过，我认为混合没有意义 white-space:pre和 word-wrap:break-word .

前者不会换行，除非 <br />遇到标签。第二个会做相反的事情:在必要时中断单词，即使是在单词中间。它们似乎存在冲突，对于为什么不同的浏览器对这些属性有不同的 react ，最明显的答案是

• 他们支持这两个属性中的任何一个
• 由于它们有冲突，所以优先级在每个浏览器中是未定义的或不同的

(不过我不能确定，我不是这方面的专家)。

我建议你仔细看看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 */

我还没有测试过这个，但我相信它应该能帮到你。