How to apply background color with css to text with line break [duplicate]

Question

I've put it in a jsfiddle to demonstrate: https://jsfiddle.net/og90214y/

I need to set so the background follows the text and not <p> elements width. For that I've set display: inline.

For padding to both sides I've got box-shadow: 45px 0 0 #f00,-45px 0 0 #f00;, but this padding doesn't work on FireFox (works on Chrome), on FireFox it only works for the first line and for the rest there is padding, but without background color on it.

What could I do to make it work on FireFox as well and show padding + background color on those 45px at each end?

Answer 1

add this property box-decoration-break: clone; & remove 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/