如何突出显示背景颜色的线条并在每一行上填充？

Question

我使用php在p标签内输出和exerpt。

然后我用一个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>

然后跨度就有了这个css ......

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

请看到出来......

查看绿色箭头 - 看起来符合要求。
请参阅红色箭头 - 缺少填充。

正如您所看到的那样，橙色高亮度线在每条线的末端都是齐平的。除了字符串的开头和结尾。

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

因此看起来每条线都以背景颜色突出显示。像塑料胶带一样，你可以在上面印上浮雕字母。

这有可能吗？

Answer 1

将“display：block”或“display：inline-block”添加到span的类

Answer 2

不幸的是我不认为这是可能的，这就是原因：

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

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