Nathan Osman Nathan Osman - 6 days ago 6
CSS Question

How to force a line break in a loooooong word in a DIV?

Okay, this is really confusing me. I have some content inside of a div like so:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>


However, the content overflows the DIV (as expected) because the 'word' is too long.

How can I force the browser to 'break' the word where necessary to fit all of the content inside?

Chi Chi
Answer

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.