Blockierter Hintergrund auf Zeilen innerhalb der Absatzmarkierung

Question

Ich suche nach einer Möglichkeit, Textzeilen innerhalb eines Absatzes hervorzuheben (oder Hintergrund einzufügen). Ich entwickle in Wordpress, wenn das wichtig ist. Hier

ist ein Beispielcode:

<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> 

ich jede Linie will einen schwarzen Hintergrund haben, die nur die Länge des Textes geht. Die Zeilen sind in nur 1 P-Tag verpackt, so dass ich nicht einfach jeden stylen kann.

Irgendwelche Ideen/Links zu Tutorials? Ich denke nicht, dass ich auf jQuery zurückgreifen muss, um jede Zeile zu einem P zu machen, aber wenn das eine Option ist.

Answer 1

Der einfachste Weg wäre, den Absatz so einzustellen, dass er angezeigt wird: Inline und fügen Sie eine Hintergrundfarbe hinzu. Sie müßten Linie allerdings bis zum Ende jeder Zeile hinzufügen bricht:

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

und der Absatz würde:

<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

Browser behandelt Zeilenumbrüche als einen einzigen Raum, so dass Sie gehen, um um den HTML zu ändern.

Ich bin nicht überzeugt, dass Sie herausfinden können, wo die Zeilenumbrüche mit Javascript existieren. In diesem Fall müssen Sie den HTML-Code selbst ändern und grundsätzlich tun, was Pat vorgeschlagen hat.

Answer 3

Mit jquery können Sie den Inhalt eines bestimmten Tags einfach mit der Funktion wrapInner in HTML umwandeln.

Wenn Sie setzen ein Inline-Element (Span zum Beispiel) um den Inhalt des Absatzes

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

Sie benötigen würde die CSS zu diesem bestimmten Inline-Element, zum Beispiel wie folgt anzuwenden.

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

Mit dieser Lösung ist es nicht notwendig, den HTML-Code in irgendeiner Weise zu bearbeiten.