Solid background behind text in multi-line p element

问题

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;
}

回答1:

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.

回答2:

Might be a bit late but. This will mean you don't need a <p> tag to define each line of text

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

回答3:

check this fiddle.

This is not the only way but you can do this by assigning different p tags to each line and giving same class name to them.

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;}

回答4:

I wouldn't suggest to use box-shadow for that, cause it works with glitches in IE:

I've posted the solution with 'box-decoration-break: clone' for webkit/firefox and 'white-space: pre-wrap' for ie here:

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

来源：https://stackoverflow.com/questions/12671484/solid-background-behind-text-in-multi-line-p-element

标签

css

inline