Поместить контур вокруг нескольких встроенных элементов через разрыв строки? ⇐ CSS

[Anonymous]

Я хочу обвести кучу встроенных элементов красочным контуром. Есть ли простой способ заставить это выглядеть прямо в тексте?

Вот HTML:

Код: Выделить всё

Text Before

This
is
not
a
public
service
announcement.

Text After

Вот CSS:

Код: Выделить всё

.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}

Снимок экрана с расширением .border Отображение: встроенное:




Снимок экрана с отображением .border: inline-block< /код>:




Я хочу, чтобы это выглядело примерно так (достигается сочетанием высоты строки, заполнения и относительного позиционирования... тьфу!):




По сути, строчные блочные элементы делают все правильно, но они не разбиваются между строками, как строчные элементы. Но встроенные элементы сворачивают свою высоту, и их приходится корректировать вручную. Неужели нет никакого способа обойти это?

Подробнее здесь: https://stackoverflow.com/questions/254 ... line-break