如何用背景颜色突出显示线条并在每条线上有填充？答案

【问题标题】：How to highlight lines with background colour and have padding on each line?如何用背景颜色突出显示线条并在每条线上有填充？
【发布时间】：2025-11-26 12:45:02
【问题描述】：

我正在使用 php 在 p 标签内输出和摘录。

然后我用 span 包裹 p 标签的内部字符串。

<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>

输出的html...

<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>

span 然后上面有这个 css...

.carousel-caption .lead span {
    background: #F60;
    padding: 5px;
}

请看这里的结果...

查看绿色箭头 - 它看起来像需要的那样。
查看红色箭头 - 缺少填充。

如您所见，橙色高亮线在每条线的末端齐平。除了字符串的开头和结尾。

所以我的问题是如何为每一行添加左/右填充？

所以看起来每一行都用背景颜色突出显示。就像你可以在上面印上字母的塑料胶带一样。

这有可能吗？

【问题讨论】：

请发布呈现的 HTML，而不是 PHP 源代码。
填充显示在 jsfiddle 上：jsfiddle.net/DnFJP
为什么不在你的 .carousel-caption 上设置背景色，那样背景总是橙色的？除非我错过了什么。
@RyanSaxe 在单行上工作正常，在多行上，除了段落的第一个和最后一个单词之外，边缘是齐平的。见这里jsfiddle.net/DnFJP/1
@Cam 请看我上面的图片 - 突出问题

标签： php javascript css

【解决方案1】：

在 span 的类中添加“display:block”或“display:inline-block”

【讨论】：

我认为这不会达到我的预期。请参阅上面的更新问题。

【解决方案2】：

不幸的是，我认为这是不可能的，这就是为什么：

span 总是像这样内联，所以 padding 在顶部、底部、左侧和右侧添加了额外的 5px。现在你的中间行不是开始或结束，因为它们是一行，所以填充不会为它们读取。

您可以使用display:block 设置背景，但您想要“突出显示”效果，这不是display:block 将提供的效果

【讨论】：

Hmmmm 有没有使用 jquery 或其他东西向每一行添加跨度的偷偷摸摸？
不幸的是，我不这么认为。我考虑过，但换行点对大小等是主观的，它仅用于样式，所以我很确定你无法确定它。有一件事，但这不是一个好主意...使用 jquery 或 php 计算理论换行符之前有多少个字符并添加空格，但这有可能出错
感谢您的帮助 ryan - 麻烦多于其价值 :(