Как подчеркнуть каждую строку текста, до конца блока - PullRequest
Новая
       35

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

0 голосов
/ 04 апреля 2011

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

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

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

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

Спасибо:)

Ответы [ 7 ]

7 голосов
/ 06 декабря 2012

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

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

<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 - перекрывает последнюю короткую нижнюю границу и завершает иллюзию.

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

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

2 голосов
/ 04 апреля 2011

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

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>
2 голосов
/ 04 апреля 2011

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

1 голос
/ 04 апреля 2011

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

<u> my text here </u>
0 голосов
/ 04 апреля 2015

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

Проблема:

underline-text-in-a-padded-link-tag-problem.png

Решение: 

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;
}

underline-text-in-a-padded-link-tag-solution.png

0 голосов
/ 04 апреля 2011

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

0 голосов
/ 04 апреля 2011

при условии, что DIV будет вашим соответствующим селектором 

div{text-decoration:underline}

или встроенным, если вы отправите это по электронной почте ... 

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