сделать заголовок текста отдельным в слове и стиле, каждый с «list-item» и автоматически растягивать с «div» родителем

Question

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

, поэтому я хочу отделить каждое слово h1 и стилизовать их с помощью элемента списка и динамического размера для каждого слова, которым оно будет:«this» будет достаточно большим, чтобы заполнить 100px контейнера, «is» больше, чем «this», чтобы заполнить 100px, потому что всего две буквы справа и другая такая же схема)

lettering.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 .

Хотя будьте осторожны при использовании классов и только имен элементовпоскольку вышеприведенное применимо к всем h1 элементам и всем .container элементам.Селектор, основанный на id, был бы гораздо более изощренным и менее подверженным случайностям.

Несмотря на то, что, перечитывая ваш вопрос, я не понимаю, чего вы хотите, кроме перемещения каждого слова в отдельный элемент списка.Динамический размер и стилизация слов / элементов?На основании чего ..?

Answer 2

Хорошо, проверьте этот jsfiddle, который я сделал.Он разбивает строку в вашем теге <h1> и помещает их в массив.Затем перебираю массив и помещаю каждое слово в <div class="container">

. После этого я удаляю строку из вашего тега <h1>, чтобы на странице не отображалось это слово.: http://jsfiddle.net/KJuZn/

Дайте мне знать, что еще нужно для этого:)

Редактировать: Может быть, даже лучше, вы исправляете часть заполнения и плохо вставляете ее туда?;)