Установить заполнение HTML-элемента на основе ширины предыдущего элементаCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Установить заполнение HTML-элемента на основе ширины предыдущего элемента

Сообщение Anonymous »

Я форматирую шекспировский сценарий в HTML. Поскольку Шекспир писал размером, принято делать отступы для строк, которые не начинаются с первой доли метра, например:

Код: Выделить всё

p.indent { padding-left: 100pt; }

Код: Выделить всё

[h4]HERMIA[/h4]
O me!
[To Helena]
You juggler, you cankerblossom,
You thief of love! What, have you come by night
And stol’n my love’s heart from him?
[h4]HELENA[/h4]
Fine, i’ faith.
Have you no modesty, no maiden shame,
No touch of bashfulness? What, will you tear
Impatient answers from my gentle tongue?
Fie, fie, you counterfeit, you puppet, you!
ГЕРМИЯ
О я!
[Елене]
        Ты фокусник, ты, цветущая язва,

Ты вор любви! Что, ты пришла ночью

И украла у него сердце моей возлюбленной?
ЕЛЕНА
        Хорошо, я верю.

Нет ли в тебе ни скромности, ни девичьего стыда,

Нет нотки застенчивости? Что, вырвешь

Нетерпеливые ответы с моего нежного языка?

Тьфу, тьфу, подделка, марионетка, ты!

Однако вместо фиксированного отступа было бы идеально сделать отступ по ширине предыдущей строки. Это выглядело бы примерно так:

ГЕРМИЯ
О, я!< /p>
[Елене]
   Ты фокусник, ты, цветущая язва,

Ты вор любви ! Что, ты пришла ночью

И украла у него сердце моей возлюбленной?
ЕЛЕНА
                 Хорошо, я верю.

Нет ли в тебе ни скромности, ни девичьей стыдливости,

Нет нотки стыдливости? Что, вырвешь

Нетерпеливые ответы с моего нежного языка?

Тьфу, тьфу, подделка, марионетка, ты!

В желаемом решении величина заполнения по левому краю каждого элемента p.indent должна быть равна ширине самого последнего предыдущего элемента p (который в общее не является самым последним предшествующим элементом, так как элементы h4 или h5 могут вмешаться).
Я предполагаю, что не смогу сделать это на чистом CSS, но раньше я был удивлен этим. Если нет, то простой JS?

Подробнее здесь: https://stackoverflow.com/questions/792 ... ng-element
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»