多文本背后的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;
}

---

更新：克里斯Coyier做了一个技术综述，发布3个月后这个答案。 值得注意的是，Firefox 32现已支持box-decoration-break （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，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在2012年也显示了这一点。

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

---

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

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

---

检查这个小提琴 。

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

链接地址: http://www.djcxy.com/p/75537.html

上一篇: CSS solid background behind text in multi

下一篇: Styling overlapping annotations in text with HTML <SPAN> tags and CSS