后面在多行p元素文本固体背景(Solid background behind text in mul

在这个滑块我的工作，我想在幻灯片中的描述有与开始和行末端一点点填充文本后面的橙色背景。我改变了p标签的显示内联和当它是只有一条线，但是当文本换行到下一行的CSS只适用于左/右填充到第一线的左侧的右侧这工作最后一行。

我怎么能不具有固体橙色正方形容器的整个宽度的大小对文本的每行的左侧和右侧的填充？

它在读取滑块文本“Lorem存有胡萝卜，生态番茄汤。家庭作业或净土，谁排球温度。但很多纸箱怀孕。Lorem存有胡萝卜。”

http://www.brainbuzzmedia.com/themes/simplybusiness/

下面是该CSS p标签：

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

Answer 1:

更新：克里斯Coyier做了技术综述，发表于3个月后的答案。值得注意的是， box-decoration-break它现在支持在Firefox 32（发布2014年2月9日）：

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

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

演示在： http://jsfiddle.net/cLh0onv3/

为了支持IE9 +，Webkit的，火狐，使用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;
}

演示： http://jsfiddle.net/cLh0onv3/1/

旧box-shadow以下方法：

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

演示在： http://jsfiddle.net/5xMkm/2/ -我第一次听到这个消息从@martijndevalk，这样的荣誉给他。 @gabitzish也显示出这回在2012年。

注： box-shadow招停在IE11和FF34正常工作。您可以添加box-decoration-break: clone; 使它工作，或看更新以上。

Answer 2:

可能是有点晚了，但。这将意味着你不需要一个<p>标签来定义文本的每一行

http://jsfiddle.net/n6UYE/4/

Answer 3:

检查这个小提琴 。

这是不是唯一的方法，但你可以通过分配不同的做到这一点p到每一行代码，并给予相同的class name给他们。

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>

CSS

 p
{
  background-color:rgba(255,165,0,0.2);
  padding:0 15px 0 15px;   
  display:inline;
  border-radius:15px;
  text-shadow:0px 0px 0px rgba(255, 210, 82, 1);
}
div{margin:15px;}