Добавление строк между строками текста

Я пытаюсь создать этот блокнот в полном css.Добавление строк между строками текста

enter image description here

Можно ли ставить строки между текстами строк? Однако я не хочу подчеркивать текст. Например, он будет таким, но без огромного расстояния между текстом, и поскольку весь текст будет добавлен пользователем, я не могу добавить промежуток между строками.

Text Text Text Text Text Text 
_____________________________ 
Text Text Text Text Text Text

источник

2015-05-21 Baris Sarac

Либо использовать фоновое изображение , или изображение переднего плана с прозрачностью, или взгляните на доступные параметры стиля, такие как границы для контейнеров и т. п. Часто это делается с использованием нижней границы на контейнере span, который завернут. Безграничные возможности. – arkascha

Также https://css-tricks.com/fun-line-height/ –

Если вам не нужна дополнительная строка и та, что находится на бумаге. Вы можете посмотреть на использование Line Height (CSS). –

Типичный подход заключается в использовании нижней границы для диапазона, содержащего фактический текст. Пролет контейнер получает завернуты, что дает желаемый вид:

Разметка:

<div id="notebook">   
    <span id="text"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </span> 
</div>

Стиль:

div { 
    border: 1px solid darkgray; 
} 
span { 
    border-bottom: 1px solid darkgray; 
}

Вот скрипку: http://jsfiddle.net/9tut5gy0/

источник

2015-05-21 17:01:46 arkascha

Он по-прежнему не похож на блокнот. Линии выглядят подчеркиванием строки ... Интересно, смогу ли я добавить фоновое изображение в текстовое поле в зависимости от выбранного текстового текста ... –

Это был другой подход, о котором я упоминал в своем комментарии выше. Вероятно, лучше всего использовать изображение шириной в один пиксель и точно так же высоко, как линии. Изображение имеет одну точку в виде строки внизу. Когда повторение для фона установлено на повторение и неопределенность внутри контейнера, эффект должен выглядеть точно так же, как строки в блокноте _and_, поэтому его легко адаптировать к разным высотам линий или контейнерам. – arkascha

Добавление строк между строками текста

ответ

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