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

【问题标题】：dynamically generated html doesn't wrap to the screen动态生成的 html 不会换行到屏幕上
【发布时间】：2010-06-29 16:58:29
【问题描述】：

我一生都无法弄清楚为什么这个标记没有换行。它没有什么特别之处，只是它是由 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>

【问题讨论】：

如果你使用 top & left css 属性，你应该将 css 属性位置设置为绝对或相对。您还使用了一个不存在的 HTML 标记按钮，您可能想要做的是
@HoLyVieR 所说的。但是，<button> 确实存在：w3schools.com/tags/tag_button.asp
另外，“不换行”到底是什么意思？你能显示屏幕截图吗？
我不知道这是否重要（但我敢打赌它确实会在 IE 中中断），但您的样式和 class="word" 标签之间没有空格。那我想知道你的意思是它也没有换行，它是否与 li 没有设置绝对位置有关？
对我来说，给出的代码包装得很好。包含的周围代码或 CSS 不够。

标签： javascript jquery html css

【解决方案1】：

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

http://jsbin.com/avopu4/edit

【讨论】：

他显然遗漏了 CSS 和/或 HTML 的关键部分。为了好玩，请尝试将 position: absolute 添加到 <li> CSS。

【解决方案2】：

将此规则添加到您的样式表中，列表项将正确换行：

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

这是扩展框问题的一种变体。

【讨论】：

我使用了那个 css，但我不希望单词中断，只是句子。所以不是“苹果船车”，而是“苹果船车”。如果你明白我在说什么。

【解决方案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>

【讨论】：