How to implement forced line wrapping of long words in DIV?

Question

Okay, this really confuses me. I have some content inside a

like this:

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

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

</div>

However, the content overflows the

(as expected) because the "word" is too long.

How do I force the browser to "break" words when necessary to fit everything?

Answer 1

I’m not sure about browser compatibility

word-break: break-all;

You can also use the <wbr> tag

Answer 2

Useword-wrap:break-word;

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

---

word-wrap: break-word has been replaced by overflow-wrap: break-word;, which works in all modern browsers. Since IE is an outdated browser, it will always rely on the deprecated and non-standard word-wrap.

The current case of using word-wrap will still work fine as it is an alias for the canonical overflow-wrap.