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>

Answer 2

使用 jquery，您可以使用wrapInner函数简单地用 HTML 包装某个标签的内容。

如果在段落内容周围放置一个内联元素（例如 span）

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

您只需要将 CSS 应用于该特定内联元素，例如像这样。

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

使用此解决方案无需以任何方式编辑 HTML。

Answer 3

浏览器将换行符视为一个空格，因此您将不得不修改 HTML。

我不相信您可以找出 Javascript 中存在换行符的位置。在这种情况下，您将不得不自己修改 HTML，并且基本上按照 Pat 的建议进行操作。