Как добавить горизонтальный отступ к каждой строке в одном многострочном предложении?

Question

Это мой код:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

Вот как это выглядит в данный момент:

http://i48.tinypic.com/2dqvo1i.png

Есть ли способ добавить отступы по сторонам?выделенного текста?Обычный отступ в SPAN не работает, потому что он учитывает только начало и конец предложения, а не каждую строку в отдельности.

Есть идеи?Код CSS3 в порядке.

Answer 1

Поработав некоторое время, я нашел неординарное решение с достойным отступлением для старых браузеров - добавление двух CSS3-теней к строкам текста:

span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}

Answer 2

white-space: pre-wrap;

Не совсем решение, но добавляет немного места перед перерывом.

Answer 3

Просто добавьте теги "p", которые окружают пролеты. Тег «p» (в отличие от span) является элементом уровня блока, поэтому отступы сверху, снизу или по бокам будут работать, как и ожидалось.

Answer 4

Наконец-то нашли выход из этого страдания.Работал на меня.Используйте кнопку слева, как это.

<p>
<button class="blankspace">
</button>
<span>
</span>
</p>

и css как

.blankspace {
    background: none;
    opacity: 0.0;
    outline:0;
    text-decoration: none;
    width: 2%;
    height: 80%;
    margin:0 auto;
    float:left;
    text-align:right;
    padding:0%;
    font-size:2px;
}

Answer 5

Вместо добавления двух CSS3-теней, как было предложено, вот гораздо более простой ответ:

использование display:block

<span> по умолчанию display:inline, поэтому границы идобавленный вами отступ не влияет на его размер.Таким образом, затрагивается только первая строка.

Используйте display:block для диапазона, а <span> теперь работает как <p> и <div>.

Вот хорошее объяснение: http://quirksmode.org/css/css2/display.html

Answer 6

Попробуйте inline-block. Он не будет работать ни в чем старше IE8 (, хотя есть некоторые обходные пути ), но все остальное популярное должно быть хорошо:

p span {
    display: inline-block;
    padding: 0 2em;
}