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

Question

У меня цвет фона, нанесенный на тег <span>, есть также левый и правый padding, установленный на нем. Проблема в том, что padding применяется только к левому (началу) и правому (окончательному) <span>, а не к левому (начало) и правому (концу) каждой строки, когда текст обернут несколькими строками.

Как применять левый и правый padding к середине линий?

h1 { 
 
    font-weight: 800; 
 
    font-size: 5em; 
 
    line-height: 1.35em; 
 
    margin-bottom: 40px; 
 
    color: #fff; 
 
} 
 
h1 span { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 0 20px; 
 
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 1

Вы можете использовать box-decoration-break свойство со значением clone.

box-decoration-break: clone; Каждый фрагмент коробки оказывается независимо друг от друга с указанной границы, заполнения и полей упаковки каждого фрагмента. Граничный радиус, пограничный образ и тень «ящик» применяются к каждому фрагменту независимо. Фон создается независимо в каждом фрагменте, что означает, что фоновое изображение с фоном-повтором: no-repeat может повторяться несколько раз. - MDN

См текущие таблицы поддержки браузера на caniuse.com

jsFiddle example

h1 { 
 
    font-weight: 800; 
 
    font-size: 5em; 
 
    line-height: 1.35em; 
 
    margin-bottom: 40px; 
 
    color: #fff; 
 
} 
 
h1 span { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 0 20px; 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 2

Multi-line-padded-text по CSS Tricks на помощь

HTML-

<div class="padded-multiline"> 
    <h1> 
    <strong> 
     How do I add padding to subsequent lines of an inline text element? 
    </strong> 
    </h1> 
</div> 

CSS-

.padded-multiline { 
    line-height: 1.3; 
    padding: 2px 0; 
    border-left: 20px solid #c0c; 
    width: 400px; 
    margin: 20px auto; 
} 
.padded-multiline h1 { 
    background-color: #c0c; 
    padding: 4px 0; 
    color: #fff; 
    display: inline; 
    margin: 0; 
} 
.padded-multiline h1 strong { 
    position: relative; 
    left: -10px; 
} 

NB: благодаря CSS Tricks для этого, и многие другие советы