浏览器兼容的自动换行和空格：pre？（取2）答案

【问题标题】：Browser compatible word wrap and whitespace: pre? (take 2)浏览器兼容的自动换行和空格：pre？（取2）
【发布时间】：2014-04-09 21:10:59
【问题描述】：

好吧，宇宙中一定有人知道这个问题的答案。

我已经在这里问过这个问题，但仍然没有解决方案。

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

另外，我试过了：

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

它在 IE6 或 7 中不起作用。

谢谢

【问题讨论】：

这个问题和stackoverflow.com/questions/4413015/…有区别吗？
您希望保留文本？你是什么意思？此外，DIV 默认会换行。
我需要保留换行符，而不是字母之间的空格。默认情况下它会自动换行，但不会保留文本中的换行符。因此，如果 div 包含文本，其中有两行，中间有 5 个空白行，它将被保留。这不是为了显示代码。 @Alvaro 这是同一个问题。

标签： css

【解决方案1】：

我已经用了一段时间了：

div{
    white-space: pre-wrap;
    font-family: monospace;
}

【讨论】：

不确定font-family: monospace; 在这里是否有所作为，但white-space: pre-wrap; 自己为我工作。
@MichaelBremerkamp 不，等宽字体与空格折叠无关，它只是以可读的方式显示源代码（典型用例）。

【解决方案2】：

它适用于 IE8+、Chrome、FF 和 Safari

div {
    white-space: pre;
    word-wrap: break-word;
}
@-moz-document url-prefix() { 
    div {
        white-space: normal !important;
    }
}

【讨论】：