Making text the div size

Question

I'm struggling with this css problem. I'm trying to make a list at the left side on the following fiddle :

http://jsfiddle.net/KH45Y/72/.

<div id="left">
    <ul id="myList">
    </ul>
</div>

It was good when the items name were short but when I tried long names, they were going over the right div.

How can I make the list items name stay on the left div even if they are going inline ?

Answer 1

check this fiddle

word-break: break-all;

does the trick

Answer 2

If you just put a space in your item name where you'd like the line to break it should do it automatically for you:

http://jsfiddle.net/jofish999/KH45Y/73/

i.e.

var textnode = document.createTextNode("ContactContactContact MoreTextOhNo"+i);

               with space here to break the line ^