Come applicare il colore di sfondo con i CSS al testo con la linea di rottura

Question

ho messo in un jsfiddle per dimostrare: https://jsfiddle.net/og90214y/

ho bisogno di impostare in modo che il fondo segue il testo e larghezza non <p> elementi. Per quello ho impostato display: inline.

Per imbottitura per entrambe le parti c'ho box-shadow: 45px 0 0 #f00,-45px 0 0 #f00;, ma questo padding non funziona su FireFox (funziona su Chrome), su FireFox funziona solo per la prima linea e per il resto non c'è imbottitura, ma senza fondo colore su di esso.

Cosa posso fare per farlo funzionare anche su FireFox e mostrare padding + colore di sfondo su quei 45 px a ciascuna estremità?

Answer 1

Aggiungi questa proprietà box-decoration-break: clone; & rimuovere box-shadow

.slider-text p { 
background: #f00 none repeat scroll 0 0; 
box-decoration-break: clone; 
-webkit-box-decoration-break: clone; 
color: #fff; 
display: inline; 
font-weight: 300; 
line-height: 1.4; 
margin-bottom: 10px; 
padding: 0 20px; 
} 

https://jsfiddle.net/og90214y/6/

Answer 2

utilizzare display: inline-block e funzionerà. L'oclour sfondo riempirà lo spazio di testo e non solo il paragrafo