CSS 多行 p 元素中文本后面的纯色背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12671484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Solid background behind text in multi-line p element
提问by BRAINBUZZ media
On this slider that I'm working on, I want the description on the slide to have an orange background behind the text with a little padding on the beginning and ends of the row. I changed the p tag's display to inline and this works when it is only one line, however when the text wraps to the next line the CSS only applies the left/right padding to the left side of the first line and the right side of the last line.
在我正在处理的这个滑块上，我希望幻灯片上的描述在文本后面有一个橙色背景，在行的开头和结尾有一点填充。我将 p 标签的显示更改为内联，这在只有一行时有效，但是当文本换行到下一行时，CSS 仅将左/右填充应用于第一行的左侧和右侧最后一行。
How can I have the padding on the left and right of each line of text without having a solid orange square the size of the full width of the container?
如何在每行文本的左侧和右侧都有填充，而没有容器全宽大小的实心橙色正方形？
It's the text in the slider that reads "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Lorem ipsum dolor sit amet."
滑块中的文字是“Lorem ipsum dolor sat amet，consectetur adipiscing elit。Duis nec purustellus，quis pulvinar tortor。Sed mattis lobortis gravida。Lorem ipsum dolor sat amet。”
http://www.brainbuzzmedia.com/themes/simplybusiness/
http://www.brainbuzzmedia.com/themes/simplybusiness/
Here's the CSS for that ptag:
这是该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;
}
回答by gabssnake
Update: Chris Coyier did a roundup of techniques, posted 3 months after this answer. Notably, there is box-decoration-breakwhich is now supported in Firefox 32 (released 02-09-2014) :
更新：Chris Coyier 做了一个技术综述，在这个答案 3 个月后发布。值得注意的是，box-decoration-breakFirefox 32（2014 年 2 月 9 日发布）现在支持：
Modern solution. Webkit, Firefox 32+, IE11+ :
现代解决方案。Webkit、Firefox 32+、IE11+：
p {
display: inline;
background-color: #FFAA3B;
padding: 0.5em 1em;
box-decoration-break: clone;
}
Demo at : http://jsfiddle.net/cLh0onv3/
演示：http: //jsfiddle.net/cLh0onv3/
To support IE9+, Webkit, Firefox, use box-shadow:
要支持 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;
}
Demo : http://jsfiddle.net/cLh0onv3/1/
演示：http: //jsfiddle.net/cLh0onv3/1/
Old box-shadowmethod below:
box-shadow下面的旧方法：
p {
display: inline;
background-color: #FFAA3B;
box-shadow: 1em 0 0 0 #FFAA3B, -1em 0 0 0 #FFAA3B;
position: relative;
left: 1em;
}
Demo at: http://jsfiddle.net/5xMkm/2/- I first heard of this from @martijndevalk, so kudos to him. @gabitzish also showed this back in 2012.
演示地址：http: //jsfiddle.net/5xMkm/2/- 我第一次从 @martijndevalk 那里听说过这个，所以我很感谢他。@gabitzish在 2012 年也展示了这一点。
Note : The box-shadowtrick stopped working properly in IE11 and FF34. You can add box-decoration-break: clone;to make it work, or see update above.
注意：该box-shadow技巧在 IE11 和 FF34 中停止正常工作。您可以添加box-decoration-break: clone;以使其工作，或查看上面的更新。
回答by Mr_Green
check this fiddle.
检查这个小提琴。
This is not the only way but you can do this by assigning different ptags to each line and giving same class nameto them.
这不是唯一的方法，但您可以通过p为每行分配不同的标签并class name为它们提供相同的标签来做到这一点。
HTML
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
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;}
回答by jesse
Might be a bit late but. This will mean you don't need a <p>tag to define each line of text
可能有点晚了但是。这意味着您不需要<p>标签来定义每一行文本
回答by tibalt
I wouldn't suggest to use box-shadow for that, cause it works with glitches in IE:
我不建议为此使用 box-shadow，因为它适用于 IE 中的故障：
I've posted the solution with 'box-decoration-break: clone' for webkit/firefox and 'white-space: pre-wrap' for ie here:
我已经为 webkit/firefox 发布了带有“box-decoration-break：clone”和“white-space：pre-wrap”的解决方案，用于即这里：
