段落标记内的行上的背景被阻止
我正在寻找一种方法来突出显示（或填充背景）段落中的文本行。如果这很重要的话，我正在使用 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，但如果这是一个选项，我会这样做。
I'm looking for a way to highlight (or fill in background) of lines of text within a paragraph. I am developing in wordpress if that matters.
Here is an example code:
<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>
I want every line to have a black background that goes only the length of the text. The lines are wraped in only 1 P tag so I can't just style each P.
Any ideas/ links to tutorials? I dont think I need to resort to jquery to make each line a P, but will if thats an opiton.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
最简单的方法是将段落设置为显示：内联并为其添加背景颜色。不过，您需要在每行末尾添加换行符：
并且该段落将变为：
The easiest way would be to set the paragraph to display: inline and add a background colour to it. You would need to add line breaks to the end of each line though:
and the paragraph would become:
浏览器将换行符视为单个空格，因此您必须修改 HTML。
我不相信你能用 Javascript 找出换行符在哪里。在这种情况下，您将必须自己修改 HTML，并且基本上按照 Pat 的建议进行操作。
Browsers treat line breaks as a single space, so you are going to have to modify the HTML.
I'm not convinced you can figure out where the line breaks exist with Javascript. In this case you're going to have to modify the HTML yourself and basically do what Pat suggested.
使用 jquery，您可以使用 wrapInner 函数简单地用 HTML 包装某个标记的内容。
如果您在段落内容周围放置一个内联元素（例如span），
则只需将CSS应用于该特定内联元素，例如像这样。
Using this solution there is no need to edit the HTML in any way.
using jquery, you can simply wrap the contents of a certain tag with HTML with the wrapInner function.
If you put an inline element (span for example) around the contents of the paragraph
you would only need to apply the CSS to that certain inline element, for example like this.
Using this solution there is no need to edit the HTML in any way.