Добавление отступов в начале и конце каждой строки текста

У меня есть пролет, который проходит несколько строк и имеет цвет фона. Мне нужно, чтобы каждая из строк имела отступ 10px в конце. Текст будет динамичным, поэтому мне нужно решение css или js, а не просто взломать его с помощью тегов nbsp (вот как я получил приведенный ниже пример)

Изображение показывает разницу между тем, что у меня есть, и тем, что я хочу:

<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT RIGHT HERE</span></h3>

h3 {
    margin:0;
    font-size: 42px;}
h3 .heading {
    background-color: #000;
    color: #00a3d0;}
h3 .subhead {
    background-color: #00a3d0;
    color: #000;}

Я не могу придумать какой-либо способ сделать это с помощью css, я рассматривал возможность использования javascript для поиска начала и конца каждой строки и добавления неиспользуемого пространства.

Есть ли у кого-нибудь идеи о том, как достичь этого? Приветствия

Ответ 1

Я тестировал это в IE8 (в IE7 не так уж плохо) и последние версии Chrome, Firefox, Opera, Safari.

Live Demo

Снимок экрана из Chrome:

Это немного глупо и, если быть честным, вероятно, более сложным, чем это стоит - решение на основе JS определенно было бы легче понять.

С этой техникой так много ошибок.

CSS

#titleContainer {
    width: 520px
}
h3 {
    margin:0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif
}
h3 .heading {
    background-color: #000;
    color: #00a3d0;
}
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

div { 
    line-height: 1.1; 
    padding: 1px 0;
    border-left: 30px solid #000; 
    display: inline-block; 
}
h3 { 
    background-color: #000; 
    color: #fff; 
    display: inline; 
    margin: 0; 
    padding: 0
} 
h3 .indent { 
    position: relative; 
    left: -15px;
}
h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15
}

HTML:

<div id="titleContainer">
    <h3><span class="indent">

        <span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT RIGHT HERE</span>

    </span></h3>
</div>

<!--[if IE]><style>
h3 .subhead {
    margin-left: -14px
}
</style><![endif]-->

Ответ 2

box-shadow упрощает работу!

box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;

Ответ 3

Вот решение, которое требует, чтобы каждое слово было обернуто в дополнительный элемент SPAN:

<h3><span class="heading"><span>THE</span> <span>NEXT</span> <span>GENERATION</span <span>OF</span> <span>CREATIVE</span> <span>TALENT</span></span><br/>
    <span class="subhead"><span>IT'S</span> <span>RIGHT</span> <span>HERE</span></span></h3>

Затем вы можете индивидуально стилизовать слова следующим образом:

h3 span {
    display: inline-block;
}
h3 > span > span {
    padding: 0 0.25em;
    margin: 0 -0.25em 0 0;
}
h3 .heading span {
    background-color: #000;
    color: #00a3d0;
}
h3 .subhead span {
    background-color: #00a3d0;
    color: #000;
}

Ответ 4

Вы могли бы сделать что-то вроде этого. Оберните его внутри <p> и установите border-left = в отступы, которые вы хотите установить для диапазона. О правильном заполнении я не думаю, что будет решение без использования JS. Кстати, я все еще ищу другие трюки.

http://www.jsfiddle.net/steweb/cYZPK/

EDIT обновлено, начиная с вашей разметки /css http://www.jsfiddle.net/steweb/cYZPK/1/

EDIT2 (используя JS..mootools) http://www.jsfiddle.net/steweb/Nn9Px/ (просто протестировано на firefox... нужно быть протестированным на других браузерах.. объяснение как можно скорее:))

Ответ 5

Почему бы просто не добавить padding-right:10px; в контейнер?

Ответ 6

Даже если это не 100% после вашей концепции дизайна, я думаю, что это единственное решение, если вы хотите придерживаться CSS.

h3 span {
  /* cross browser inline-block */
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;

  padding:0 10px;
}

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

Надеюсь, что поможет

Ответ 7

Здесь можно сделать это без дополнительной отметки - хотя для этого требуется изображение. http://codepen.io/DeptofJeffAyer/pen/FiyIb

Ответ 8

Я очень рекомендую использовать Split Lines JS: https://github.com/jeremyharris/split_lines

Проблема с тегами заключается в том, что она обертывает значение "inline" от начала до конца. Поэтому, если у вас есть фиксированная ширина, и ваш диапазон автоматически переходит на вторую строку, эта строка текста будет обернута первой строкой и разделяет интервал. Чтобы обойти это, вам нужно разделить каждую строку текста отдельно. Например:

<span>line one</span>
<span>line two</span>

Это не простой вариант, если текст, который вы хотите разделить отдельно, автоматически создается из Wordpress или аналогичного... Чтобы обойти это, используйте JQuery script выше.

Другой способ обойти его (хотя может и не быть идеальным) - это просто добавить display: block; для вас пробегает класс css:

span { display: block; background-color: #333; color: #fff; }

Это будет охватывать весь блок, похожий на кнопку.

Надеюсь, что это поможет.