Заполнение для цвета фона встроенного текста с text-indent

Question

Я в основном пытаюсь сделать ЭТО с абзацем, содержащим текстовый отступ, но не могу его получить, потому что display:inline не позволяет текстовый отступ. Есть идеи?

Answer 1

Использование псевдоэлементов

Я создал пример JSFiddle, который использует span элементы, которые inline а затем добавляет before а также after псевдоэлементы, чтобы добавить дополнительный интервал спереди и в конце каждого выделенного блока текста.

В случае, если вам нужно манипулировать количеством этого пространства, отрегулируйте font-size внутри этих псевдоэлементов, и вы должны быть хорошими, чтобы пойти.

Трюк просто:

.highlight {
    font-family: Helvetica, Sans-serif;
    font-size: 48pt;
    font-weight: bold;
    text-transform: uppercase;
}
    .highlight:before,
    .highlight:after {
        /* no-breaking-space (nbsp) entity */
        content: "\00a0";
    }

Количество контролируемого пространства

Используя соответствующие символы в :before а также :after псевдоэлементы можно фактически контролировать количество добавленного расстояния до отдельных пикселей.

Лучший способ - это использовать thin space который в типографских терминах 1/5 или иногда 1/6 от em. Если мы установим font-size из этих двух псевдоэлементов с тонким пространством 6 пикселей всегда должно быть приблизительно 1 ширина пикселя независимо от расхождений размеров.

.highlight:before,
.highlight:after {
    content: "\2009";
    font-size: 6px;
}

Верхнее определение стиля добавит 1 пиксель пространства с каждой стороны. Если мы поместим 5 тонких пробелов в контент, мы получим 5 пикселей пространства...

Или используйте один тонкий пробел и добавьте к нему отступы и таким образом управляйте его шириной. Или даже отменить любой контент и просто использовать отступы:

.highlight:before,
.highlight:after {
    content: "";
    padding: 0 5px; /* will give 10px space */
}

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

Answer 2

Без тега br: демо здесь: http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}