动态生成的html不会换行到屏幕

Question

我不能为我的生活找出为什么这个标记没有包装。它没什么特别的，除了它是由javascript生成的。这是代码。任何有关它为什么搞乱的想法都会受到欢迎。

如果需要，我可以包含js。但基本上它会读取textarea中的文本，提取单词，并创建单词列表。

风格：

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

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

和标记

<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</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>

Answer 1

看起来像是在包装。你在用什么浏览器？

http://jsbin.com/avopu4/edit

Answer 2

将此规则添加到样式表中，列表项将正确包装：

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

这是扩展框问题的变体。

Answer 3

完整代码

<!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>