Come applicare gli stili CSS al solo testo

Question

Sto cercando di applicare uno stile a un testo HTML. Quello che voglio è fondamentalmente:

quello che ottengo è fondamentalmente:

Come si può vedere, la prima riga è rientrato, ma non qualsiasi altra linea. Finora, ho il testo all'interno di un <span>, che è annidato all'interno di un .

.slide-text .text { 
 
    background-color: rgba(0, 0, 0, .6); 
 
    color: #FFF; 
 
    padding: 8px 17px; 
 
} 
 
.slide-text .slide-title { 
 
    font-family: "Titillium Web", Arial, Helvetica, sans-serif; 
 
    font-weight: 700; 
 
} 
 
.slide-text .slide-content { 
 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
 
    font-weight: 500; 
 
}

My HTML code is: 
 
<div class="slide-text"> 
 
    <div class="slide-title"><span class="text">[TITLE]</span> 
 
    </div> 
 
    <div class="slide-content"><span class="text">[TEXT]</span> 
 
    </div> 
 
</div>

Grande lavoro, a condizione che né il titolo o il contenuto sono più di una riga. Non appena superano due o più linee, la campata perde la sua imbottitura interna. Cambiando l'intervallo interno a display: inline-block; viene visualizzato un blocco non appena entra in due righe. C'è un modo per ottenere l'effetto che sto cercando?

Answer 1

Il guru dei CSS Chris Coyier ha un articolo su CSS-Tricks listing several methods to solve this. Un metodo è quello con box-shadow. È già menzionato come una risposta, ma ha bisogno di un po 'più di amore per lavorare nel moderno Firefox :).

.multi-line-padded { 
 
    background: black; 
 
    color: white; 
 
    
 
    /* For the top and bottom padding */ 
 
    padding: 0.5em 0; 
 
    
 
    /* Text height (1.0) + compensate for padding (0.5 * 2) */ 
 
    line-height: 2; 
 
    
 
    /* For the left and right padding */ 
 
    /* Vendor prefixes FIRST */ 
 
    -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    -moz-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    
 
    /* Firefox defaults to `box-decoration-break: split`, we need `clone` */ 
 
    box-decoration-break: clone; 
 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p> 
 

 
<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

Answer 2

Prova a seguire l'esempio nella risposta migliore a this similar question. In sostanza suggerisce di usare un'ombra di dialogo per creare il riempimento.

span { 
    background:#ff0;color:#000; 
    box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
} 

sarà rientrare tutto il testo in parti uguali e aggiungere imbottitura gialla (cambiare il #ff0 a qualsiasi valore di colore HTML è necessario). Tuttavia, dovrai riformattare il codice esistente, dato che indurrà oltre l'ombra.