多行p元素中文本后面的纯色背景 [英] Solid background behind text in multi-line p element

问题描述

在我正在使用的此滑块上，我希望幻灯片上的描述在文本后面具有橙色背景，并在行的开头和结尾处留有少量填充.我将p标签的显示更改为内联，并且仅在一行时有效，但是当文本换行到下一行时，CSS仅将左/右填充应用于第一行的左侧和右侧最后一行.

如何在文本的每一行的左侧和右侧填充空白，而又没有一个橙色的正方形(该正方形的宽度等于容器的整个宽度)?

滑块中的文本显示为"Lorem ipsum dolor sit amet，consectetur adipiscing elit.Duis nec purustellus，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;
}

解决方案

更新:克里斯·科耶尔(Chris Coyier)做了 box-decoration-break Firefox 32(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;使其正常运行，或参见上方的更新.

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.

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."

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

Here's the CSS for that p tag:

.camera_caption p {
    background: none repeat scroll 0 0 #FFAA3B;
    color: #000000;
    display: inline;
    font-size: 1.7em;
    margin: 0;
    padding: 3px 7px;
}

解决方案

Update: Chris Coyier did a roundup of techniques, posted 3 months after this answer. Notably, there is box-decoration-break which is now supported in Firefox 32 (released 02-09-2014) :

Modern solution. Webkit, Firefox 32+, IE11+ :

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

Demo at : http://jsfiddle.net/cLh0onv3/

To support IE9+, Webkit, Firefox, use 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/

Old box-shadow method below:

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.

Note : The box-shadow trick stopped working properly in IE11 and FF34. You can add box-decoration-break: clone; to make it work, or see update above.

这篇关于多行p元素中文本后面的纯色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！