每行的背景颜色分开的文本

Question

我必须向文本（例如标题）添加 background-color，并在其周围添加一些填充。

应用 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%;
}

如何结合两种方法的优势？

Answer 1

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

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

Answer 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; 因为它在 window 上添加了不需要的水平溢出调整大小。因此，由于 Chrome 需要此属性的供应商前缀，仅使用标准语法声明它是一种解决方法，即使在它和 IE9+[=19 中也能使其正确运行 =]

每行的背景颜色分开的文本

Text with background color separated for each row

css

padding

background-color