Set background color through CSS for text only with line breaks

by neerajsinghvns

HTML

<span class="ngs-hl-1">
    <p>
        This text is longer than 200 pixel and therefore a line break will occur. This text is longer than 200 pixel and therefore a line break will occur. This text is longer than 200 pixel and therefore a line break will occur. This text is longer than 200 pixel and therefore a line break will occur. This text is longer than 200 pixel and therefore a line break will occur. 
    </p>
</span>

<hr />
<span class="ngs-hl-1">test</span> <br/> 
<br/>
Example for <a href="http://stackoverflow.com/questions/7123997/set-background-color-through-css-for-text-only-with-line-breaks">Set background color through CSS for text only with line breaks</a>.

CSS

.ngs-hl-1
{
    /*width: 200px;*/
    
    /* Light grey background for contrast in this example */
    background-color: pink/*lightgrey*/;
}

p
{
    /* Yellow for contrast in this example */
    color: yellow;
    
    /* Use justify if you really want the entire 200px to be red */
    /* Otherwise remove this line */
    text-align: justify;
}

/* Using the pseudo-element selector :first-line */
/* http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo */
p:first-line
{
    background-color: red;
}