Css 多行p元素中文本后面的实心背景

在我正在处理的这个滑块上，我希望幻灯片上的描述在文本后面有一个橙色背景，在行的开头和结尾有一点填充。我将p标记的显示更改为inline，这在只有一行时有效，但是当文本换行到下一行时，CSS仅将左/右填充应用到第一行的左侧和最后一行的右侧

如何在每行文本的左侧和右侧添加填充，而不使用与容器全宽相同大小的实心橙色正方形

滑块上的文字是“Lorem ipsum door sit amet，Concertetur adipising elit.Duis nec purus tellus，quis pulvinar tortor.Sed mattis lobortis gravida.Lorem ipsum door sit amet.”

以下是

p

标签的CSS：

.camera_caption p {
    background: none repeat scroll 0 0 #FFAA3B;
    color: #000000;
    display: inline;
    font-size: 1.7em;
    margin: 0;
    padding: 3px 7px;
}

选中此项

这不是唯一的方法，但您可以通过为每一行指定不同的

p

标记并为它们指定相同的

类名来实现

HTML

 <div><p>Lorem ipsum dolor sit amet, consectetur</p><br>
 <p>adipiscing elit. Duis nec purus tellus, quis pulvinar</p><br>
 <p>tortor. Sed mattis lobortis gravida. Lorem ipsum</p><br>
 <p>dolor sit amet.</p></div>​

可能有点晚，但是。这意味着您不需要使用
标记来定义每一行文本

更新：Chris Coyier做了一个测试，在回答这个问题3个月后发布。值得注意的是，Firefox 32（发布日期：2014年9月2日）现在支持以下功能：

现代解决方案。Webkit、Firefox 32+、IE11+：

p {
    display: inline;
    background-color: #FFAA3B;
    padding: 0.5em 1em;
    box-decoration-break: clone;
}

演示地点：

要支持IE9+、Webkit、Firefox，请使用
box shadow
：

p {
    display: inline;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
    padding: 0.5em 0em;
    box-decoration-break: clone;
}

演示：

旧的
框阴影
方法如下：

p {
    display: inline;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 0 #FFAA3B, -1em 0 0 0 #FFAA3B;
    position: relative;
    left: 1em;
}

演示：-我第一次从@martijndevalk听说这个，所以他很荣幸@加比齐什也证明了这一点

注意：
box shadow
技巧在IE11和FF34中停止正常工作。您可以添加
框装饰打断：克隆使其工作，或查看上面的更新。
我不建议使用框阴影，因为它在IE中会出现故障：


我已经发布了针对webkit/firefox的“盒子装饰中断：克隆”解决方案
和ie的“空白：预包装”在此处：

橙色方形背景是否与最长文本行（而不是整个容器）的大小相同？哦，你为什么要这么做，它看起来一点也不时髦？如果只是为了让文本可读，我建议使用
文本阴影：0 8px白色
insteadIt 99%的时间只用于一行文本，这看起来不错，是滑块中非常常见的设计。当有多行时，它只需要看起来不那么糟糕。如果在没有背景的行之间有两个像素的间距，那就更好了。例如，使用
行高：55px
，这实际上看起来比原始版本好得多。是的，但是填充如何只适用于第一行的开头和最后一行的结尾呢？在firefox中失败，里面有虫子吗ie@tibalt
box shadow
技巧在IE11和FF34中停止正常工作，它们现在需要
box装饰中断：克隆。请参阅更新的答案。这在IE11和FF34中已停止正常工作，请参阅my以获取解决方案。框阴影解决方案还会在元素缩放或视口缩放未设置为100%时在Chrome中导致小故障。当一切都恢复正常时，我甚至看到了小故障。
p {
    display: inline;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 0 #FFAA3B, -1em 0 0 0 #FFAA3B;
    position: relative;
    left: 1em;
}