CODEWITHSUNDEEP
css
Carpet
Carpet

Reputation: 519

word-wrap does not work in IE

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.

Upvotes: 12

Views: 28218

Answers (3)

Anton Lyhin
Anton Lyhin

Reputation: 1945

Word wrap can be implemented for IE in the following way as well:

div {
  max-width: 200px;
  word-wrap: break-word;
}
<div>loooooooooooooooooooooooooooooooooooooooooongword</div>
<div>long long long long long long long word</div>

Upvotes: 0

James Alarie
James Alarie

Reputation: 21

Your p within div works fine even in IE6. Your div within pre is invalid HTML.

Upvotes: 0

Sean H Jenkins
Sean H Jenkins

Reputation: 1780

As word-wrap is a CSS3 property, it is only supported by IE9 and higher. For IE8 try

-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.

Once again a IE hack is required. Try adding this for IE7.

white-space: normal;

Upvotes: 13

Related Questions