3

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

4 回答 4

13

更新：Chris Coyier 做了一个技术综述，在这个答案后 3 个月发布。值得注意的是，box-decoration-breakFirefox 32（2014 年 2 月 9 日发布）现在支持：

现代解决方案。Webkit、火狐 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;以使其工作，或查看上面的更新。

于 2013-08-14T00:30:24.100 回答
2

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

https://dl.dropboxusercontent.com/u/1206404/ie-bug.png

我已经为 webkit/firefox 和 'white-space: pre-wrap' 发布了解决方案：

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

于 2014-10-31T14:48:47.260 回答
2

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

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

于 2012-10-12T01:05:13.100 回答
1

检查这个小提琴。

这不是唯一的方法，但您可以通过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;}
于 2012-10-01T11:04:40.197 回答