Css: Background-Color on Multi-Line Text

CSS: Background-color on multi-line text?

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>

How to add background color to a multi-line paragraph in CSS?

The solution is here: http://jsfiddle.net/cLh0onv3/451/

Just add box-decoration-break: clone; and a box-shadow to display a pseudo-padding at ends of each line: box-shadow: 0.250em 0 0 $black,-0.250em 0 0 $black;

Multi-line text background-color with CSS cuts off characters

The fix that I found is to wrap the text in a second <span> and style that with position: relative. The outer span renders the background color in the same position, and then the inner span renders the text on top of it.

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
}

#highlight > span {
  position: relative;
  color: white;
}

<p>Lorem ipsum <span id="highlight"><span>dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span></span> in mi.

How to apply background color with css to text with line break

add this property box-decoration-break: clone; & remove box-shadow

.slider-text p {
background: #f00 none repeat scroll 0 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #fff;
display: inline;
font-weight: 300;
line-height: 1.4;
margin-bottom: 10px;
padding: 0 20px;
}

https://jsfiddle.net/og90214y/6/

Multi line heading with background color the width of text

What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.

The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.

Script server or javascript can help you, so you should not have to mind text markup while typing.

The idea looks like this : http://jsfiddle.net/rnCTL/

   h1 span {
        background: #fff;
        line-height:44px;
        padding:4px 4px 4px 10px;
        margin:0;
        display:inline-block;
    }
    .headline-black {
        height:219px;
        width:367px;
        background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
        padding:40px;
        box-sizing:border-box;
    }

How do I color multiple line of text under a specific paragraph in CSS?

You can use the + selector instead of ~ so you can target only the needed p and avoid specifity/order issue:

h3 + p,h3 + p + p{    color: blue;}
h4 + p,h4 + p + p{    color: red;}

<h3>Heading 1</h3><p>This section of the paragraphs only to be shown as blue...</p><p>This section of the paragraphs only to be shown as blue...</p>
<h4>Heading 2</h4><p>This section of the paragraphs only to be shown as red...</p><p>This section of the paragraphs only to be shown as red...</p>
<h3>Heading 1 (Again)</h3><p>This section of the paragraphs only to be shown as blue...</p><p>This section of the paragraphs only to be shown as blue...</p>

Css: Background-Color on Multi-Line Text