IE7 seems to have trouble wrapping text in a div with a width narrower than the text itself, unlike other browsers which handle it better.
<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, the phrase "District of Columbia" remains on one line, whereas in other browsers it displays as:
District of
Columbia
In this case, IE7 is not displaying the text correctly on two lines like it should. Adding overflow:hidden results in cutting off the text entirely.
Do you know why IE7 is having difficulty wrapping the text to two lines?