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，但如果那是一个opiton。

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包装某个标记的内容。

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

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

你只需要将CSS应用于某个内联元素，例如像这样。

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

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

在段落标记内的线上被阻止的背景

3 个答案: