Добавление отступов в начале и конце каждой строки текста
У меня есть пролет, который проходит несколько строк и имеет цвет фона. Мне нужно, чтобы каждая из строк имела отступ 10px в конце. Текст будет динамичным, поэтому мне нужно решение css или js, а не просто взломать его с помощью тегов nbsp (вот как я получил приведенный ниже пример)
Изображение показывает разницу между тем, что у меня есть, и тем, что я хочу:
![padding difference]()
<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:
![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; }
Это будет охватывать весь блок, похожий на кнопку.
Надеюсь, что это поможет.