如何使用css将背景颜色应用于带换行符的文本

我把它放在一个jsfiddle来演示:https://jsfiddle.net/og90214y/

我需要设置所以背景遵循文本而不是

元素宽度.为此,我已经设定了display: inline.

对于我已经获得的两边填充box-shadow: 45px 0 0 #f00,-45px 0 0 #f00;,但是这个填充不起作用FireFox(工作Chrome),在FireFox上它只适用于第一行,其余部分有填充,但没有背景颜色.

我怎样才能使它在FireFox上运行并在每端45px上显示填充+背景颜色？

添加此属性box-decoration-break: clone;并删除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/