Question

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

so i want separate each h1 word and styling them with list-item and dynamic size each word
it will be :

this
is
cool
typograp
right

lets say the container is 100px so each word wrap differently (“this” will be big enough to fill 100px of container, “is” is more bigger than “this” to fill 100px because just two letter right, and other same schematic)

lettering.js as far as i know just separate them, it easy if just styling static text.

thanks for ur time guys

Answer 1

This works pretty well:

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.

Though be careful using classes and just element-names, since the above would apply to all h1 elements and all .container elements. An id based selector would be much more refined and less accident-prone.

Although re-reading your question I fail to understand what you want, besides moving each word into its own list-item. Dynamically sizing and styling the words/elements? Based on what..?