dynamically generated html doesn't wrap to the screen

I cannot for the life of me figure out why this markup is not wrapping. There's nothing special about it, except that it is generated by javascript. Here's the code. Any thoughts on why it's messing up would be welcome.

I can include the js if you need. but basically it reads the text in the textarea, extracts the words, and creates a list of words.

the style:

<style type="text/css">
#lorem{
    display: block;
    width: 100%;
}
#main{

}
.word{
    margin: 5px;
}
li{
    list-style-type: none;
    display: inline;
}
</style>

and the markup

<div id="header">
    <textarea id="lorem"></textarea>
    <button type="button" id="btn">Create list</button>
</div>
<div id="main">
    <ul>
        <li count="14" style="font-size: 260.294%; top: 200px; left: 100px;" class="word">apple</li>
        <li count="17" style="font-size: 300%; top: 154.03px; left: 184.147px;" class="word">iphone</li>
        <li count="3" style="font-size: 114.706%; color: rgb(60, 60, 60); top: 58.3853px; left: 190.93px;"class="word">launch</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 1.00075px; left: 114.112px;"class="word">sloppy</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 34.6356px; left: 24.3197px;"class="word">bertolucci</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 128.366px; left: 4.10757px;"class="word">world</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 196.017px; left: 72.0584px;"class="word">about</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 175.39px; left: 165.699px;"class="word">record</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 85.45px; left: 198.936px;"class="word">iphones</li>
        <li count="3" style="font-size: 114.706%; color: rgb(60, 60, 60); top: 8.88697px; left: 141.212px;"class="word">company</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 16.0928px; left: 45.5979px;"class="word">reports</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 100.443px; left: 0.000979345px;"class="word">related</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 184.385px; left: 46.3427px;"class="word">including</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 190.745px; left: 142.017px;"class="word">signal</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 113.674px; left: 199.061px;"class="word">where</li>
        <li count="5" style="font-size: 141.176%; color: rgb(36, 36, 36); top: 24.0312px; left: 165.029px;"class="word">phone</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 4.23405px; left: 71.2097px;"class="word">colleague</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 72.4837px; left: 3.86025px;"class="word">points&开发者_开发技巧lt;/li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 166.032px; left: 24.9013px;"class="word">there</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 198.87px; left: 114.988px;"class="word">users</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 140.808px; left: 191.295px;"class="word">perhaps</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 45.2271px; left: 183.666px;"class="word">product</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 0.00391736px; left: 99.1149px;"class="word">market</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 46.7167px; left: 15.378px;"class="word">would</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 142.418px; left: 9.44216px;"class="word">which</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 199.12px; left: 86.7648px;"class="word">getting</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 164.692px; left: 176.256px;"class="word">mobile</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 70.7861px; left: 195.638px;"class="word">devices</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 3.73941px; left: 127.091px;"class="word">other</li>
        <li count="3" style="font-size: 114.706%; color: rgb(60, 60, 60); top: 25.1942px; left: 33.6366px;"class="word">their</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 115.425px; left: 1.19684px;"class="word">multitasking</li>
        <li count="2" style="font-size: 101.471%; color: rgb(90, 90, 90); top: 191.474px; left: 59.5962px;"class="word">jbertolucci</li>
    </ul>
</div>

---

Looks like it's wrapping. what browser are you using?

http://jsbin.com/avopu4/edit

---

Add this rule to your style sheet and the list items will wrap correctly:

#main{
    word-wrap:break-word;
}

This is a variant of the expanding box problem.

---

full code

<!DOCTYPE html>
<html lang="en">
<head>
<title>cloud generator</title>
<meta charset=utf-8">
<script src="http://www.google.com/jsapi?key=ABQIAAAALubzLxDPe376ukzxpz6qlRSeRrtKW42wftmgVeTHJfwF5iQHORSEne6ICdaMBMcnlC7OHYbOJMJ86Q" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8.0");
</script>
<script type="text/javascript">
$(function(){

    $('#btn').click(function(){
        var lorem = $('#lorem').val();
        var uLorem = lorem.toLowerCase().replace(/\W/g," ");    
        var aLorem = uLorem.split(" ");
        var oLorem = {};
        var min = 1;
        var max = 2;
        var count = 0;  

        for(var i = 0; i < aLorem.length; i++){
            var word = aLorem[i];

            if(word.length > 4){
                if(oLorem[word]){
                    oLorem[word]++;
                    count = oLorem[word];
                    if(count > max){
                        max = count;
                    }
                }
                else{
                    oLorem[word] = 1;
                }
            }
        }

        var index = 0;
        for(var val in oLorem){
            var m = oLorem[val];
            var r = (Math.floor(index/360)+1) * 100;

            if(m > 1){
                var $val = $("<li></li>")
                            .addClass("word")
                            .css({
                                "font-size": 150*(1.0+(1.5*m - max/2)/max) + "%",
                                "color": "rgb(" + 180/m + "," + 180/m + "," + 180/m + ")",
                                "top": r*Math.cos(index)+r,
                                "left": r*Math.sin(index)+r
                            }).
                            attr({
                                "count": m
                            })
                            .text(val);
                $('#main ul').append($val);
                index++;
            }
        }   
    });
});
</script>
<style type="text/css">
#lorem{
    display: block;
    width: 100%;
}
#main{

}
.word{
    margin: 5px;
}
li{
    list-style-type: none;
    display: inline;
}
</style>
</head>
<body>
<div id="header">
    <h1>cloud generator</h1>
    <textarea id="lorem"></textarea>
    <button type="button" id="btn">Create cloud</button>
</div>
<div id="main">
    <ul></ul>
</div>
</body>
</html>