文本不以IE7内的宽度在div中换行

Question

In IE7 the text in a div with a width that is narrower than the text will not wrap to two lines. It works on other browsers better than 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;
}

In IE7 District of Columbia stays on one line when in other browsers it is

District of
Columbia

Which is what it should be, so IE7 isn't correct with one line like District of Columbia. If I add overflow:hidden it gets cut off.

Anything about this that explains why the text will not wrap to two lines in IE7?

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

Give that a go.