Как подчеркнуть каждую строку текста, до конца блока

Question

Итак, вот мой вопрос, я делаю информационный бюллетень для клиента, который будет выглядеть как открытка.

Я хочу, чтобы моя раскладка выглядела как написание строк

Может ли кто-нибудь помочь мне достичь того, что я пытаюсь сделать? Помещение моего текста в теги TD не работает, так как я не знаю длины каждого предложения.

Дайте мне знать, если вам нужно больше информации!

Спасибо:)

Answer 1

В ваших строках, которые вам нужно подчеркнуть, добавьте style="border-bottom: 1px solid #000"(возможно, на вашем содержащем td)

Answer 2

Я только что столкнулся с этой проблемой, когда клиенту "нужно" иметь раздел заметок на распечатке с введенным пользователем текстом заметки, подчеркнутым, как на спиральной бумаге. (Я научился перестать спрашивать, почему.) Почему я не использовал фоновое изображение? Это не будет распечатывать, так что не вариант.

Вот структура (идентификаторы для ясности):

<p id = "p">
    <span id = "span1">
        <span id = "span2">
            sadfa sdfhkas dfjkahsd fhjklasdg f askjldfh jklas djklfh aljks hfjkl hasjdklfg hjlashdjlfgh jlkashdjkl gfhloashdfgh jkladshjkgl haskl dhfiu hajkl fghuasbhfljbahuk bfkljabwehrf bajkls bflaskdjf ljakdfk
        </span>
    </span>
</p>

Применяются следующие стили:

#p {
    border-bottom: 1px solid black;
    text-align: justify;
}
#span1 {
    display: block;
    margin-bottom: -1px;
}
#span2 {
    border-bottom: 1px solid black;
}

Давайте начнем с внутренней стороны здесь...

#span2 дается нижняя граница для создания объемного взгляда на линованной бумаге. Однако, если мы остановимся здесь, у нас возникнет проблема: линии не доходят до правого поля, как было упомянуто ранее. К этому вопросу мы вернемся через минуту.

#span1Упаковка #span2 - это 50% решения этой проблемы слишком короткой линии. Я дал ему свойство display блока, которое позволит мне применить нижнее поле -1px, эффективно "прикрывая" последнюю нависающую линию #span2 с нижним краем #span1. Эффект от этого не стоит много, пока мы не доберемся до...

#p Здесь окупаются стили, которые мы применили к #span1. Во-первых, у нас есть text-align: justify которая заботится о большинстве линий нижней границы, достигающих правого поля, за исключением, конечно, последней строки, которая теперь выглядит действительно неуместной. Чтобы позаботиться об этом, мы применяем border-bottom: 1px solid black в #p который - из-за нижнего поля -1px в нашем стиле блока #span1 - перекрывает последнюю короткую нижнюю границу и завершает иллюзию.

Да, это немного глупо, но когда дело доходит до проволоки и требования клиента не могут быть скорректированы, иногда вам нужен именно помет.

(Примечание: я не ожидал, что это сработает для форматирования электронной почты... Как я уже говорил ранее, это то, что мне нужно, чтобы имитировать внешний вид линованной бумаги на печатной странице.)

Answer 3

Если я не ошибаюсь, вы хотите что-то вроде этого:

http://jsfiddle.net/eB6tY/

CSS:

#postcard .line
{
    width: 100%;
    border-bottom: 1px solid #000;
}

HTML:

<div id="postcard">
    <div class="line">Line 1</div>
    <div class="line">Line 2</div>
    <div class="line">Line 3</div>
</div>

Answer 4

Может быть, я упускаю суть, но не могли бы вы сделать

<u> my text here </u>

Answer 5

Это появилось в моем поиске, поэтому я опубликую свое решение моей проблемы. Мне нужно было подчеркнуть a тег, у которого есть дополнение к концу строки; Проблема заключалась в том, что подчеркивание начиналось с начала элемента, а не текста.

Проблема:

Решение:

menu .heading a {
    color: #414142 ;
}
.menu .heading a:after {
    /* to get a nice underline that starts at padding-left offset */
    border-bottom: 2px solid #414142;
    content: '';
    display: block;
    position: relative;
    bottom: -0.5em;
}

Answer 6

Вы можете использовать фоновое изображение с высотой в одну строку текста (плюс margin-bottom) и шириной 1 пиксель. Контент будет "прозрачным плюс точка для места, куда должна идти линия"...

Answer 7

Предполагая, что DIV в качестве вашего соответствующего селектора

div{text-decoration:underline}

или в строке, если вы пишете это...

<div style='text-decoration:underline'>