在多行p元素的文本后面的CSS坚实背景

在我正在处理的这个滑块上,我希望幻灯片上的描述在文本后面有一个橙色背景,在行的开头和末尾有一点填充.我将p标签的显示更改为内联,当它只有一行时可以工作,但是当文本换行到下一行时,css只将左/右填充应用到第一行的左侧和右侧的最后一行.

如何在每行文本的左侧和右侧填充填充,而不是容器的整个宽度大小的实心橙色方块？

这是滑块中的文字“Lorem ipsum dolor sit amet,consectetur adipiscing elit.Duis nec purus tellus,quis pulvinar tortor.Sed m​​attis lobortis gravida.Lorem ipsum dolor sit amet.”

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

这是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;
}

更新：克里斯科伊尔做了一个 roundup of techniques,在这个答案后3个月发布.值得注意的是,Firefox 32(2014年9月2日发布)现在支持 box-decoration-break：

现代解决方案Webkit,Firefox 32,IE11：

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

演示时间：http://jsfiddle.net/cLh0onv3/

要支持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;
}

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

下面的旧盒子阴影方法：

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也显示了这个back in 2012.

注意：盒子阴影技巧在IE11和FF34中停止正常工作.你可以添加box-decoration-break：clone;使它工作,或看到上面的更新.