为每行分隔背景颜色的文本答案

【问题标题】：Text with background color separated for each row为每行分隔背景颜色的文本
【发布时间】：2016-01-10 20:22:54
【问题描述】：

我必须为文本（例如标题）添加背景颜色，并在其周围添加一些填充。

应用display:inline-block 填充是完美的，但显然，背景将跨越整个块宽度（例如 100%）。

设计要求每行文本都有一个单独的背景条，这可以使用display:inline 和line-height:160%; 来实现，但这有一个缺点，即仅在第一行应用左侧填充，仅在第一行右侧填充最后。

Here a jsFiddle with two examples。 第二个与期望的行为最相似，但显然填充不正确。

CSS代码的相关部分是：

.inline-block
{
    display:inline-block;
    padding:5px 20px;
}

.inline
{
    display:inline;
    padding:5px 20px;
    line-height:160%;
}

如何结合两种方式的优点？

【问题讨论】：

你说的这个背景条是什么？
对不起，也许我不清楚，我想要第二个例子中的背景栏（蓝色背景），其中每一行的背景是分开的（感谢@987654326 @) 并且宽度与每行文本内容完全相同（但实际上在这种特定情况下我有填充问题）
那不是背景“栏”，那是空白。
你看到我的 jSfiddle 了吗？在帖子中，我只报告了每种情况的具体规则，而不是免费的。在 jsFiddle 中，您应该会看到完整的示例
如果你改变你的身体颜色你应该明白。没有 "bar" ，文本是内联的，所以颜色环绕在文本周围，每行之间留有空白。

标签： css padding background-color

【解决方案1】：

您可以为此目的使用 box-shadow CSS 调用。我已经完成了最终结果的小提琴。然后，您可以使用它来获得您想要的确切结果

CSS：

.highlightme {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-decoration-break: clone;
}

JSFiddle

【讨论】：

不幸的是行为不是我想要的。如前所述，我需要在我的蓝色背景示例中的每个背景行之间进行分隔，而且您的代码在浏览器中也不一致。在 Firefox 中有不需要的横向边距并且没有填充
请查看更新后的 JSFiddle，来自您的 cmets，这就是您正在寻找的 @LucaDetomi
在他的代码中添加box-decoration-break: clone;怎么样（蓝色背景的那个），我认为不添加span标签就可以了？
但是你仍然需要把它包在一个盒子里才能完成这项工作
@HenryVarro 您对我的小提琴的简单编辑将是完美的，但不幸的是，这个特定规则有一个 very little cross-compatibility

【解决方案2】：

从建议使用box-decoration:break; 属性的其他答案中获得灵感，我对此主题进行了调查，还发现this page 有一些可能的解决方案。

“实际上”（浏览器支持随时间而变化）的最佳方法是将引用的“Fabien Doiron 的 box-shadow 方法”结合一点修改以仅解决Firefox 32+ 的特定行为。

updated jsFiddle 的具体规则如下：

.inline
{
    display:inline;
    padding:5px 20px;
    background:blue;
    color:white;
    line-height:160%;

    box-shadow: 10px 0 0 blue, -10px 0 0 blue;
    box-decoration-break: clone;
}

所有浏览器都使用多个box-shadow 来模拟横向填充，而需要添加box-decoration-break: clone; 以覆盖默认具有box-decoration-break: split; 的特定Firefox 32+ 行为。

关于交叉兼容性的说明：

box-decoration-break: clone; 仅适用于 FireFox。

在 Chrome 中，（实际上）强制不设置等效的 -webkit-box-decoration-break: clone;，因为它在调整窗口大小时添加了不需要的水平溢出。因此，由于 Chrome 需要此属性的供应商前缀，因此仅使用标准语法声明它是一种解决方法，以使其即使在其中以及在 IE9+ 中也能正常运行

【讨论】：