段落標記內的行上的被阻止的背景

Question

我正在尋找一種突出顯示（或填充背景）段落內文本行的方法。如果重要的話，我正在開發wordpress。

下面是一個例子代碼：

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

我想每一行有一個黑色的背景下，只能進入文本的長度。這些線條僅包含1個P標籤，因此我不能只爲每個P.標註樣式。任何想法/指向教程的鏈接？我不認爲我需要訴諸jquery來使每行都成爲P，但是如果這是一個選擇。

Answer 1

最簡單的方法是設置段落顯示：內聯併爲其添加背景顏色。您將需要添加換行符每一行的最後階段：

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

該段將成爲：

<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

瀏覽器把換行作爲一個單一的空間，所以你將不得不修改HTML。

我不相信你可以找出哪裏有換行符存在的Javascript。在這種情況下，你將不得不自己修改HTML，並基本上做Pat的建議。

Answer 3

使用jQuery，你可以用wrapInner函數簡單地用HTML包裝某個標記的內容。

如果你把周圍的段落

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

你只需要在CSS應用到特定的內聯元素，例如像這樣的內容的內聯元素（跨度爲例）。

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

使用此解決方案不需要以任何方式編輯HTML。