CSS: background color for multiline text?

Question

You have an idea to add the "background-color" property in multi-line text with two difficulties:

• The background should stop after the last word of each line
• There is no space between each line without a 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 shown by @gabitzish stopped working fine in IE11 and FF34 + (released 09-2014).

You can add box-decoration-break:clone; so that it works in IE11 and FF34 +:

 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 the corresponding prefixes.

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

Note. This is already indicated elsewhere .

Answer 3

I found that this solution works great with a combination of the box-shadow method and some corresponding add-on on the <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

Getting perfect with pure CSS is difficult and only possible under certain conditions. For example, if you use breaks and set the line height to large, you will see gaps between them. What about laying around?

In addition, you will need time intervals and it will just guess your markup.

Fortunately, Sam Croft came up with a simple jQuery plugin to counter this. It is fast, easy and works in 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 5

Just change the display window 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 a space between each line, set font-size to line-height or vv

Answer 6

This is one of the differences between the <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 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 fine:

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/

PS But not in IE8 ...