How to force a line break in a loooooong 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

I am not sure about the browser compatability

word-break: break-all;

Also you can use <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.

Answer 2

CSS word-wrap:break-word;, tested in FireFox 3.6.3

Answer 3

You could pull this off with JavasScript, here is a sample that inserts a "wbr" tag into strings at a position of your choice. I don't think wbr is 100% cross browser, so you could also insert a "-space" to allow the words to wrap.

function wbr(str, num) { 
  return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
    return text + "<wbr>" + char;
  });
}

Answer 4

Use word-wrap:break-word;

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