如何应用背景颜色与css到文本与换行符 [英] How to apply background color with css to text with line break

问题描述

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

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

我需要设置，所以后台跟随文本而不是< p> 元素宽度。因为我已经设置 display：inline 。

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

$ c> box-shadow：45px 0 0＃f00，-45px 0 0＃f00; ，但是这个填充在 FireFox （在 Chrome 上工作），在FireFox它只适用于第一行，其余的有填充，但没有背景颜色。

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.

我可以做什么使它在FireFox上工作，并在每一端显示padding +背景颜色45像素？

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

推荐答案

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

这篇关于如何应用背景颜色与css到文本与换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！