CSS solid background behind text in multi

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.

---

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/

---

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

链接地址: http://www.djcxy.com/p/75538.html

上一篇: 如何响应地缩进元素

下一篇: 多文本背后的CSS实体背景