如何使用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;＆amp;删除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-block，它会起作用。背景颜色将填充文本空间而不仅仅是段落