CSS: Background-color on multi-line text?

Question

Do you have an idea to add a \"background-color\" property on a multi-line text, with two difficulties:

• Background must stop after the last word of each line

Answer 1

Just change the display box type to inline:

p {
  display: inline;
}

body {
  width: 170px;
}
p {
  display: inline;
  background: black;
  color: white;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

And if there is space between each line, then set font-size equal to line-height, or v.v.

Answer 2

This box-shadow Example works just great:

HTML

<p class="title step-1">
    <span class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, qui suscipit error quasi tempore magni sit nostrum aliquam soluta vel. Dolorem, reprehenderit sint molestiae in est perspiciatis quas accusantium commodi. </span>
</p>

CSS

.title {
  font: 20px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 45px;
  display: inline-block;
  width: 300px;
}
.title .highlight {
  display: inline;
  background: #ee4035;
  color: white;
  padding: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}
.title.step-1 .highlight {
  box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
}

JSFiddle: http://jsfiddle.net/verber/WmRT3/

P.S. But not in IE8...

Answer 3

The box-shadow solution as shown by @gabitzish stopped working properly in IE11 and FF34+ (released 09-2014).

You can add box-decoration-break:clone; to make it work in IE11 and FF34+ too:

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

Works in Webkit, Firefox, IE9+ with proper prefixes.

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

Note: Already stated this elsewhere.

Answer 4

I think this is what you are looking for: http://jsfiddle.net/9BTYQ/1/

span {
    color: white;
    background-color: #343132;
    box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
}

div {
    width: 100px;
}

<div>
    <span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
</div>   

Answer 5

I've found this solution works nicely with a combination of the box-shadow method and some corresponding padding on a <p> element around the <span> element

p {
  display:block;
  padding:0 10px;
  font-size:2em;
}

span {
  color: white;
  background:#333;
  box-shadow: 0 0 0 10px #222;
  padding:0;
  line-height:1.5;
}

http://jsfiddle.net/tsoligo/mMg4B/

Answer 6

This is one of the difference between <span> and <p> tags.

<span style="background:black; color:white;">
Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry.<br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br> when an unknown printer took a galley of type
<br> and scrambled it to make a type specimen book.</span>