Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Background-color on multi-line text?

Tags:

css

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 :

enter image description here

Thanks !

like image 862
user1677010 Avatar asked Oct 03 '12 13:10

user1677010


People also ask

How do you put a background on text in CSS?

Use text inside :after pseudo element to make appear text as the background. Output: Using :before pseudo elements: Using :before pseudo elements with :before pseudo elements having lower z-index value make it to appear as background. Use text inside :before pseudo element to make appear text as the background.

How do you apply padding to each line in multi line text?

A bit late to the party, but, you could use a <p> tag instead of a <span> , that will apply the padding to all lines.

How do you put background color on text in HTML?

How to Add Background Color in HTML. To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.


1 Answers

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>   
like image 116
gabitzish Avatar answered Sep 19 '22 14:09

gabitzish