如何将css背景色应用于换行文本

Question

我把它放在jsfiddle中演示：https://jsfiddle.net/og90214y/

我需要设置为背景跟随文本，而不是<p>元素的宽度。为此，我设置了display: inline。

对于两边的填充，我有box-shadow: 45px 0 0 #f00,-45px 0 0 #f00;，但这种填充在FireFox上不起作用（在Chrome上起作用），在FireFox上它只适用于第一行，其余的都有填充，但没有背景色。

我该怎么做才能让它在FireFox上也能工作，并在每一端的45px上显示填充+背景色？

Answer 1

添加此属性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/

Answer 2

使用display:inline块，它就会工作。背景oclour将填充文本空间，而不仅仅是段落