Question

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

应用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调用用于此目的。我已经完成了最终结果的小提琴。然后，您可以使用它来获得您想要的确切结果

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的盒子阴影方法”与稍作修改相结合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 +中正确运行

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

2 个答案: