Как сделать бордер что бы он точно ложился под текст при сжатии блока?

Question

[igorstec]

тут код
jsfiddle.net/u7eth90a
проблема в том что при сжатии блока когда прыгает текст бордер выходит за границы текста... как тут поступить правильно? (вариант с br для примера мне он не подходит)

Answer 1

[vigor]

h1 надо сделать inline-block и сделать ему border-bottom.
А сам h1 выравнять по центру из материнского блока.

Comments

[igorstec]

я так понял меня немного не поняли... тут вся суть в том что при сжатии блока (когда прыгает текст с одной строки в две) бордер выходит за границы текста

Answer 2

[Владлен Грачев]

Первое, что пришло в голову. Возможно, лучше использовать jQuery (если подключено уже), так как getElementsByClassName() не работает в IE<9.

Answer 3

[Arconas]

Как вариант укажи h1 нужный width.
У тебя родитель имеет 50% + padding по 10px. H1 твой padding не учитывает. У него свой width на ширину блока.

jsfiddle.net/u7eth90a/13

Или отдельным span "рисуй" линию по ширине блока с текстом.

Answer 4

[malcore_hardcore968]

Те кто попал сюда и не нашел здесь ответа. Хорошим решение будет присвоить элементу display: table-cell и нужный border. Тогда border будет подстраиваться под текст.
Тут подробнее:
stackoverflow.com/questions/16399232/restrict-bord...