CSS 浏览器兼容的自动换行和空格：pre？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4413015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browser compatible word wrap and whitespace: pre?
提问by Logan
I need text within a div to be preserved and to wrap. So far I am having a tough time coming up with a solution. The best solution I've been able to find doesn't work for all browsers.
我需要在 div 中保留和包装文本。到目前为止，我很难想出一个解决方案。我能找到的最佳解决方案不适用于所有浏览器。
The following works in Chrome and IE6+, but in Firefox the text is not wrapping.
以下适用于 Chrome 和 IE6+，但在 Firefox 中，文本不会换行。
white-space: pre;
word-wrap: break-word;
I've found that for whatever reason the text does not wrap in Firefox with white-space:pre. And -moz-pre-wrap does not work in Firefox 3.5 (why??), only pre-wrap. BUT when I add pre-wrap to the list, IE 6 and 7 don't work. Very frustrating.
我发现无论出于何种原因，文本在 Firefox 中都没有用 white-space:pre 换行。并且 -moz-pre-wrap 在 Firefox 3.5 中不起作用（为什么？？），只能预包装。但是当我将预包装添加到列表中时，IE 6 和 7 不起作用。非常令人沮丧。
The code:
编码：
.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;
}
回答by mingos
The CSS3 properties don't always work as we would like them to work :).
Still, I don't see a point in mixing white-space:preand word-wrap:break-word.
CSS3 属性并不总是像我们希望的那样工作:)。不过，我认为混合white-space:pre和word-wrap:break-word.
The former will not wrap the text unless a <br />tag is encountered. The second one will do the opposite: break the words whenever it's necessary, even in the middle of a word. They seem to be in conflict, and the most obvious answers to why different browsers react differently to these properties is that
除非<br />遇到标签，否则前者不会包装文本。第二个将做相反的事情：在必要时中断单词，即使是在单词中间。它们似乎存在冲突，对于为什么不同的浏览器对这些属性的反应不同，最明显的答案是
- they support either of the two properties
- since they are in conflict, the precedence is undefined or different in each browser
- 它们支持这两个属性中的任何一个
- 由于它们存在冲突，因此每个浏览器中的优先级未定义或不同
(I can't be sure though, I'm not really an expert here).
（不过我不确定，我不是这里的真正专家）。
I suggest you take a closer look at thisand thisand then decide on what should be used in your particular case.
我建议你仔细看看这个和这个，然后决定在你的特定情况下应该使用什么。
[EDIT]
[编辑]
You might want to try this (should work in ALL browsers):
你可能想试试这个（应该适用于所有浏览器）：
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 */
I haven't tested this, but I believe it should do the trick for you.
我还没有测试过这个，但我相信它应该对你有用。
回答by SoonDead
I know this is a very old issue, but since I have just ran into it I feel the urge to answer.
我知道这是一个非常古老的问题，但因为我刚刚遇到它，所以我有一种回答的冲动。
My solution would be:
我的解决方案是：
Use white-space: pre-wrap;as it is nearly the same as white-space: pre;, just adds linebreaks. (reference: http://www.quirksmode.org/css/whitespace.html)
使用方式white-space: pre-wrap;与 几乎相同white-space: pre;，只是添加了换行符。（参考：http: //www.quirksmode.org/css/whitespace.html）
Then I would specifically target old-iewith either conditional comments (reference: http://www.quirksmode.org/css/condcom.html) or with browser specific css hacks (http://paulirish.com/2009/browser-specific-css-hacks/).
然后我会专门针对old-ie使用条件注释（参考：http: //www.quirksmode.org/css/condcom.html）或浏览器特定的 css hacks（http://paulirish.com/2009/browser-具体-css-hacks/）。
An example for the second method:
第二种方法的示例：
.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 }
This will be enough to force it to wrap.
这将足以迫使它换行。
