IE7 内宽度的 div 中没有换行的文本答案

【问题标题】：Text not wrapping in div with a width within IE7IE7 内宽度的 div 中没有换行的文本
【发布时间】：2012-07-03 20:15:34
【问题描述】：

在 IE7 中，宽度小于文本的 div 中的文本不会换行为两行。它在其他浏览器上的效果比 IE7 更好。

<div class="office-header-info">
<div class="local-office">District of Columbia</div>
</div>

.office-header-info {
  float: left;
}

.local-office {
  color: #893f22;
  width: 165px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin-top: 17px;
  white-space: normal;
  line-height: 1.1;
}

在 IE7 中，哥伦比亚特区在其他浏览器中保持在一行

哥伦比亚特区

这应该是什么，所以 IE7 与哥伦比亚特区这样的线路不正确。如果我添加溢出：隐藏它会被切断。

有什么可以解释为什么文本在 IE7 中不会换行到两行？

【问题讨论】：

也试试浮动.local-office。
这里有一些有用的提示：stackoverflow.com/questions/458922/…
你尝试过自动溢出吗？
刚刚在最新的 Chrome、IE6、IE7 中尝试过：三种浏览器的结果相同。 jsfiddle.net/EjaB6

标签： html css internet-explorer-7

【解决方案1】：

white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */

试一试。

【讨论】：

这些建议都不起作用，但 jsfiddle.net 链接给了我一个想法，让我继续添加 div 和样式，直到它崩溃为止。
他将此标记为 IE7 的问题，但您为他提供了涵盖 Opera、Mozilla 和 HP 打印机的解决方案？
@animuson 是的，我是。以防万一他想更好地控制他的 div 以及它的包装方式。