Текст с цветом фона, разделенным для каждой строки

Question

Мне нужно добавить фоновый цвет к тексту (например, название), добавив вокруг него немного отступов.

Применение display:inline-block прокладка идеально, но, очевидно, фон будет охватывать всю ширину блока (например, 100%).

Дизайн требует наличия отдельной полосы фона для каждой строки текста, и это может быть достигнуто с помощью display:inline с line-height:160%;, но это имеет недостаток применения прокладки, оставленной только на первой строке и отступом только на последнем.

Here a jsFiddle with two examples. Второй из них наиболее похож на желаемое поведение, но явно заполняется неправильно.

Соответствующая часть кода CSS является:

.inline-block 
{ 
    display:inline-block; 
    padding:5px 20px; 
} 

.inline 
{ 
    display:inline; 
    padding:5px 20px; 
    line-height:160%; 
} 

Как сочетать преимущества двух подходов?

Answer 1

Вдохновляясь другими ответами, которые предложили использовать box-decoration:break; собственности, я исследовал эту тему, нахождение также this page с некоторыми возможными решениями.

Самое лучшее, что «фактически» (поддержка браузера изменяется во времени), чтобы объединить цитируемой «Fabien Doiron в бокс-тень Метод» с небольшими изменениями для решения только специфическое поведение Firefox 32+.

updated jsFiddle имеет следующие конкретные правила:

.inline 
{ 
    display:inline; 
    padding:5px 20px; 
    background:blue; 
    color:white; 
    line-height:160%; 

    box-shadow: 10px 0 0 blue, -10px 0 0 blue; 
    box-decoration-break: clone; 
} 

Множественные box-shadow используется во всех браузерах, чтобы имитировать боковое заполнение, в то время как необходимо добавить box-decoration-break: clone; переопределить конкретные Firefox поведение, длиной от 32 имеет box-decoration-break: split; по умолчанию.

---

Примечание о кроссе- совместимости:

box-decoration-break: clone; необходимо только для FireFox.

Скорее в Chrome, есть (фактически) Обязательно НЕ устанавливать эквивалент -webkit-box-decoration-break: clone;, поскольку он добавляет нежелательное горизонтальное переполнение при изменении размера окна. Таким образом, из-за того, что Chrome нуждается в префиксе поставщика для этого свойства, объявление его только стандартным синтаксисом является обходным путем, чтобы заставить его работать правильно даже в нем, а также в IE9 +

Answer 2

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

CSS:

.highlightme { 
background-color: #A8332E; 
padding: 0.5rem 0; 
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
box-decoration-break: clone; 
} 

JSFiddle