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

Question

在我正在处理的这个滑块上，我希望幻灯片上的描述在文本后面有橙色背景，在行的开头和末尾有一点填充。我将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;
}

Answer 1

更新：克里斯科伊尔做了一个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/

下面的旧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也显示了back in 2012。

注意：box-shadow技巧在IE11和FF34中停止正常工作。您可以添加box-decoration-break: clone;以使其正常工作，或查看上面的更新。

Answer 2

检查 fiddle 。

这不是唯一的方法，但您可以通过为每一行分配不同的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;}

Answer 3

可能有点晚了但是。这意味着您不需要<p>标记来定义每行文本

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

Answer 4

我不建议使用box-shadow，因为它适用于IE中的故障：

我已经使用＆＃39; box-decoration-break：clone＆＃39;发布了解决方案。对于webkit / firefox 和＆＃39;白色空间：预包装＆＃39;因为这里：

https://stackoverflow.com/a/26677158/337549