Blocked Background on lines within Paragraph Tag

Question

I'm looking for a way to highlight (or fill in background) of lines of text within a paragraph. I am developing in wordpress if that matters.

Here is an example code:

<p> this is a line
This is a line a little longer
Just a short one
a really really long one that is longer than any
a medium sized one to end it</p>

I want every line to have a black background that goes only the length of the text. The lines are wraped in only 1 P tag so I can't just style each P.

Any ideas/ links to tutorials? I dont think I need to resort to jquery to make each line a P, but will if thats an opiton.

Answer 1

The easiest way would be to set the paragraph to display: inline and add a background colour to it. You would need to add line breaks to the end of each line though:

p {
   display: inline;
   color: white;
   background-color: black;
}

and the paragraph would become:

<p> this is a line<br/>
This is a line a little longer<br/>
Just a short one<br/>
a really really long one that is longer than any<br/>
a medium sized one to end it</p>

Answer 2

Browsers treat line breaks as a single space, so you are going to have to modify the HTML.

I'm not convinced you can figure out where the line breaks exist with Javascript. In this case you're going to have to modify the HTML yourself and basically do what Pat suggested.

Answer 3

using jquery, you can simply wrap the contents of a certain tag with HTML with the wrapInner function.

If you put an inline element (span for example) around the contents of the paragraph

$("p").wrapInner("<span></span>");

you would only need to apply the CSS to that certain inline element, for example like this.

p span {
    background-color: black;
    color: white;
}

Using this solution there is no need to edit the HTML in any way.