jquery - 使用“列表项”分别以文字和样式分隔文本标题，并使用“div”父项自动拉伸(stretch)

<div class="container">
    <h1>this is cool typograp right</h1>
</div>

所以我想把每个h1单词分开，用列表项和每个单词的动态大小设置它们的样式
它将是：

this
is
cool
typograp
right

假设容器是100px，所以每个单词的包装都不同（“这个”足够大，可以填充100px的容器，“是”比“这个”要大，可以填充100px，因为只有两个字母对，还有其他相同的示意图）
据我所知，只需将它们分开，就可以轻松地设置静态文本的样式。
谢谢你们的时间伙计们

最佳答案

这很有效：

var words = $('h1').text().split(' ');
$('.container').empty().append('<ul />');
for (i=0;i<words.length;i++){
    $('<li />').text(words[i]).appendTo('.container ul');
}

JS Fiddle demo。
尽管使用类和元素名称时要小心，因为上面的内容将应用于所有h1元素和所有.container元素。基于id的选择器将更加精细，不易发生事故。
尽管我读了一遍你的问题，但我还是不明白你想要什么，除了把每一个单词放到它自己的列表中。动态调整单词/元素的大小和样式基于什么。。？

关于jquery - 使用“列表项”分别以文字和样式分隔文本标题，并使用“div”父项自动拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8326658/