CSS 自动换行在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8357689/
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
word-wrap does not work in IE
提问by Carpet
Word-wrap as follows:
换行如下：
/* The Breakage of Too Long Words */
div.break_word {
width: 690px;
word-wrap: break-word;
}
does wrap the word for the following table, but it also keeps the table stretched:
确实为下表包装了单词，但它也使表格保持拉伸：
I used it in this portion of the table:
我在表格的这一部分使用了它：
<!-- The Contribution Description -->
<tr>
<td colspan="3"><div class="break_word"><p><?php echo $contribution_description; ?></p></div></td>
</tr>
<!-- The Separation Line -->
<tr>
<td colspan="3"></td>
</tr>
<!-- The Contribution -->
<tr>
<td colspan="3"><pre><div class="break_word"><?php echo $contribution; ?></div></pre></td>
</tr>
</table>
Does it keep it stretched, because it is overall a table and not a div? Or for which reason does it not stretch back, because the word is indeed wrapped.
它是否保持拉伸，因为它总体上是一个表格而不是一个 div？或者是什么原因它不回缩，因为这个词确实被包裹了。
回答by Sean H Jenkins
As word-wrap is a CSS3 property, it is only supported by IE9 and higher. For IE8 try
由于自动换行是 CSS3 属性，因此仅 IE9 及更高版本支持。对于IE8试试
-ms-word-wrap
So try
所以试试
div.break_word {
width: 690px;
word-wrap: break-word;
-ms-word-wrap: break-word;
}
Hope this helps.
希望这可以帮助。
Update
更新
It seems that even if you use -ms-word-wrap in IE7, it defaults the white-space: nowrap; which then overrides the word-wrap property.
似乎即使您在 IE7 中使用 -ms-word-wrap，它也会默认空格： nowrap; 然后覆盖自动换行属性。
Once again a IE hack is required. Try adding this for IE7.
再次需要 IE hack。尝试为 IE7 添加这个。
white-space: normal;
回答by James Alarie
Your p within div works fine even in IE6. Your div within pre is invalid HTML.
即使在 IE6 中，您在 div 中的 p 也能正常工作。您在 pre 中的 div 是无效的 HTML。
回答by Anton Lyhin
Word wrap can be implemented for IE in the following way as well:
也可以通过以下方式为 IE 实现自动换行：
div {
max-width: 200px;
word-wrap: break-word;
}<div>loooooooooooooooooooooooooooooooooooooooooongword</div>
<div>long long long long long long long word</div>