jquery - 段落标记内的线条背景被遮挡

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

最简单的方法是将段落设置为 display: inline 并为其添加背景色。不过，您需要在每行的末尾添加换行符:

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>