Come applicare il riempimento a ogni riga nel testo su più righe?

Question

Ho il colore di sfondo applicato al tag <span>, vi è anche impostato a destra e a sinistra . Il problema è: il padding viene applicato solo a sinistra (inizio) e destra (fine) di <span>, non a sinistra (inizio) ea destra (fine) di ogni riga quando il testo è avvolto su più righe.

Come è possibile applicare la linea padding sinistra e destra alle linee centrali?

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

Si potrebbe usare box-decoration-break di proprietà con un valore di clone.

box-decoration-break: clone; Ogni frammento casella è reso indipendente, con l'specificato confine, padding e margin incarto ciascun frammento. Il raggio-bordo, l'immagine-bordo e l'ombra-riquadro, vengono applicati a ciascun frammento indipendentemente. Lo sfondo viene disegnato indipendentemente in ogni frammento, il che significa che un'immagine di sfondo con ripetizione dello sfondo: nessuna ripetizione può essere ripetuta più volte. - MDN

Vedi le tabelle di supporto del browser correnti alla 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 da Trucchi CSS in soccorso

Il codice HTML

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

Il 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: grazie a CSS Tricks per questo, e tanti altri suggerimenti