Solid background behind text in multi-line p element

Question

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

Is a square orange background the size of the longest line of text (not the whole container) ok or not? Oh, and why do you want to do that, it doesn't look stylish at all? — xception, Oct 01 '12 at 10:27
If it's just to make the text readable I suggest something like `text-shadow: 0 0 8px white;` instead — xception, Oct 01 '12 at 10:33
It is 99% of the time only going to be used with one line of text, which looks good and is pretty common design in sliders. It just needs to look less bad when there are more than one lines. If there could be a couple pixels of space between lines that had no background that would be even better. — BRAINBUZZ media, Oct 01 '12 at 10:37
Use `line-height: 55px` for example, that actually looks much better than the original — xception, Oct 01 '12 at 10:43
Ah yeah, but what about how padding only applies to the beginning of the first line and end of last? — BRAINBUZZ media, Oct 01 '12 at 10:47
that's because the element is inline, but unless you know how long you want each line to be and wrap them in some other element you can't do anything about it, was already discussed here http://stackoverflow.com/questions/7215011/css-apply-padding-to-inline-element-across-two-lines — xception, Oct 01 '12 at 10:48
How about using different `p` tags to each line? and giving same class ofcourse. — Mr_Green, Oct 01 '12 at 10:55

score 13 · Answer 1 · edited May 23 '17 at 11:48

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.

@tibalt The `box-shadow` trick stopped working properly in IE11 and FF34, they now require `box-decoration-break: clone;`. See updated answer. — gabssnake, Nov 09 '14 at 13:18

score 2 · Answer 2 · edited Oct 21 '12 at 19:32

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/

edited Oct 21 '12 at 19:32

Peter O.

32,158
14
82
96

answered Oct 12 '12 at 01:05

jesse

21
1

score 2 · Answer 3 · edited May 23 '17 at 12:06

2

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

edited May 23 '17 at 12:06

Community

1
1

answered Oct 31 '14 at 14:48

tibalt

15,201
1
29
22

This stopped working properly in IE11 and FF34, See my [updated answer](http://stackoverflow.com/a/18221393/1585841) for a solution. – gabssnake Nov 09 '14 at 13:20
The box-shadow solution also causes glitches in Chrome, as soon as the element is scaled, or when the viewport zoom is not set to 100%. And I even saw glitches when everything was set to normal. – TheCat Apr 04 '19 at 14:26

Mr_Green · Answer 4 · 2012-10-26T05:59:31.597

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

Solid background behind text in multi-line p element

4 Answers4

Linked