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
• No space between each line without background

Example :

Thanks !

Answer 1

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 2

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 3

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 4

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 5

Getting it perfect with pure CSS is difficult and only achievable under certain conditions. For example, if you use breaks and set the line-height to big, you'll see gaps in between. And what about the padding around the sides?

Also, you'll need spans and that will just uglify your markup.

Luckily Sam Croft came up with a simple jQuery plugin to counter this. It's quick, light and works under most conditions.

Article: http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

Demo: http://samcroft.co.uk/demos/inline-backgrounds/

Source: https://github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js

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>

Answer 7

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