word-wrap does not work in IE

Question

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.

Have you tried putting `word-wrap:` on the `
` inside the `
`? — Bojangles, Dec 02 '11 at 14:24
This shouldn't make a difference as both p and div are block elements and thus treated the same. — Sean H Jenkins, Dec 02 '11 at 14:26
as far as i can see, it's just ie7+table that gives trouble. if you replace table with fixed-width div, the div won't stretch — ptriek, Dec 02 '11 at 14:32

Sean H Jenkins · Accepted Answer · 2011-12-02T14:47:18.033

13

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;

edited Dec 02 '11 at 14:47

answered Dec 02 '11 at 14:24

Sean H Jenkins

1,770
3
21
29

it works fine in ie7-9 - it's just ie7 that's a bit too stupid to understand that the width of the parent element shouldn't expand. – ptriek Dec 02 '11 at 14:29

Anton Lyhin · Answer 2 · 2016-10-16T15:23:38.433

0

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>

edited Oct 16 '16 at 15:23

answered Oct 16 '16 at 15:11

Anton Lyhin

1,925
2
28
34

score 0 · Answer 3 · answered Dec 02 '11 at 15:20

0

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

answered Dec 02 '11 at 15:20

James Alarie

21
1

word-wrap does not work in IE

3 Answers3

Linked