Как применить границу к каждой строке DIV?

Мой код:Как применить границу к каждой строке DIV?

div { 
    border-bottom: 1px solid; 
}

<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. 
</div>

В тексте достаточно долго перенос слов происходит. Можно ли применить нижнюю границу отформатированного CSS к каждой строке текста? Более того, возможно ли, чтобы каждая нижняя граница была на полной ширине DIV (даже если текст был только половиной или меньше ширины линии)?

источник

2012-01-23 vxl

Вы можете просто применить подчеркивание текста:

div { 
    text-decoration: underline; 
}

источник

2012-01-23 19:45:53 animuson

Вам не хватает смысла. Он/она хочет отформатировать его. –

@ Justin: Его пример сказал «1px solid», поэтому я решил, что это не имеет значения. – animuson

Мне нужна граница в формате CSS. – vxl

text-decoration:underline будет работать, но если вы хотите большего контроля над «подчеркивание» (цвета, стили, ширина), вы можете сделать это:

div { 
    border-bottom: 1px solid; 
    display:inline; 
}

Демонстрация: http://jsfiddle.net/ckt8L/

источник

2012-01-23 19:48:50

Это почти то, что я хочу. Можно ли установить ширину строки inline до 100%? – vxl

Вы хотите что-то похожее на выровненную бумагу, с подчеркиванием каждой линии на 100% шириной? Я не знаю ни одного чистого пути, но могу придумать несколько хакерских способов сделать это, если это то, что вам нужно. –

Точно! Буду признателен за ваше решение. – vxl

DIV представляет собой блок-элемент, вместо того, чтобы использовать промежуток, который является инлайн.

<style> 
div span{ 
    border-bottom: 1px solid; 
} 
</style> 
<div> 
    <span> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div>

Смотрите эту скрипку с другим подходом, с использованием фона в качестве границы дна:

http://jsfiddle.net/YcSUQ/3/

источник

2012-01-23 19:49:38

Это почти то, что я хочу. Можно ли установить ширину [tag: span] на 100%, чтобы граница была установлена на полную ширину окна? – vxl

Можно расширить границу до 100% ширины, даже если текст недостаточно длинный. Но вам нужно использовать изображение с точкой в качестве фона, которая будет повторяться, давая эффект границы: http://jsfiddle.net/YcSUQ/ –

Это дает границу только для одной строки, и если текст занимает целую строку. – vxl

хорошо для одного, оберните текст в <p>

, то вы можете применить

p {border-bottom: 1px solid black;}

источник

2012-01-23 19:49:50

Это относится ко всему абзацу, но мне нужно иметь нижнюю границу в каждой строке текста. – vxl

Как применить границу к каждой строке DIV?

ответ

Смежные вопросы