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

Question

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?

Answer 1

Use word-wrap:break-word;

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

---

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

Answer 2

I am not sure about the browser compatibility

word-break: break-all; 

Also you can use the <wbr> tag

<wbr> (word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.