使文本标题在单词和样式中分开，每个标题都带有"list-item"和自动拉伸"div"父级

Question

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

所以我想分开每个h1单词和样式与列表项和动态大小的每个单词它将是:

this
is
cool
typograp
right

假设容器是100px，那么每个单词的换行方式不同("this"足够大，可以填充100px的容器，"is"比"this"更大，可以填充100px，因为只有两个字母对，还有其他相同的原理图)

letter .js据我所知只是把它们分开，如果只是对静态文本进行样式化就很容易了。

感谢大家的宝贵时间

Answer 1

效果很好:

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的选择器将更精细，更不容易发生事故。

虽然重读了你的问题，但我还是不明白你想要什么，除了把每个单词都放到自己的列表项中。动态调整文字/元素的大小和样式?基于什么?

Answer 2

好了，看看我做的这个jsfiddle。它分割<h1>标记中的字符串并将它们放入数组中。然后循环遍历数组并将每个单词放入<div class="container">

之后，我从你的<h1>标签中删除字符串，以防止页面再次显示该字符串。

演示:http://jsfiddle.net/KJuZn/

让我知道你还需要什么来做这件事:)

编辑:也许更好的是，你把填充物的部分填好，然后我把它放进去?div;)