浏览器兼容的自动换行和空格：pre？

Question

我需要保留和换行 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;
}

Answer 1

CSS3 属性并不总是像我们希望的那样工作:)。 不过，我认为混合 white-space: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 */

我还没有测试过这个，但我相信它应该对你有用。

Answer 2

我知道这是一个非常古老的问题，但由于我刚刚遇到它，所以我有回答的冲动。

我的解决方案是：

使用white-space: pre-wrap;，因为它与white-space: pre; 几乎相同，只是添加了换行符。 （参考：http://www.quirksmode.org/css/whitespace.html）

然后我会专门针对 old-ie 使用条件 cmets（参考：http://www.quirksmode.org/css/condcom.html）或特定于浏览器的 css hack（http://paulirish.com/2009/browser-specific-css-hacks/）。

第二种方法的例子：

.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-wrap; 
  word-wrap: break-word;
}

/* IE6 and below */
* html .introsub  { white-space: pre  }

/* IE7 */
*:first-child+html .introsub { white-space: pre  } 

这足以强制它换行。