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

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

На рисунке показана разница между тем, что у меня есть, и тем, что я хочу:разница заполнения

<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S 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, чтобы найти начало и конец каждой строки, и о добавлении неразрывного пробела.

У кого-нибудь есть идеи как этого добиться? ура

Источник

8 ответов

Решение

Я протестировал это в 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'S RIGHT HERE</span>

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

<!--[if IE]><style>
h3 .subhead {
    margin-left: -14px
}
</style><![endif]-->
Источник

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;
Источник

Вот решение, которое требует, чтобы каждое слово было заключено в дополнительный 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;
}
Источник

Вы могли бы сделать что-то вроде этого. Оберните это внутри <p> и установите border-left = для отступа слева, который вы хотите установить на span. Что касается правильного заполнения, я не думаю, что будет решение без использования 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... необходимо протестировать в других браузерах.. объяснение как можно скорее:))

Источник

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

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

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

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

~

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

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

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

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

Источник

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

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

  padding:0 10px;
}

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

надеюсь, это поможет

Источник

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

Источник

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

Источник
Другие вопросы по тегам