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

Это мой код:

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

В настоящее время он выглядит так:

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

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

Любые идеи? Код CSS3 в порядке.

Ответ 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;
}

Ответ 2

white-space: pre-wrap;

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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