[css] How do I make a text go onto the next line if it overflows?

I tried word-wrap: break-word;, but it separates lines mid word.

In order to use word-wrap: break-word, you need to set a width (in px). For example:

div {
    width: 250px;
    word-wrap: break-word;
}

word-wrap is a CSS3 property, but it should work in all browsers, including IE 5.5-9.

word-wrap: break-word; 

add this to your container that should do the trick