为每行分隔的背景颜色的文本 [英] Text with background color separated for each row

问题描述

我必须在文本（例如标题）中添加一个背景颜色。

I have to add a background-color to a text (a title for example) adding some padding around it.

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

Applying display:inline-block padding is perfect, but obviously, background will span across entire block width (e.g. 100%).

可以使用 display：inline 和 line-height：160％; 但是这有一个缺点，即只在第一行使用填充，而只在最后一个填充。

Design requires to have a separate background strip for each line of text, and this could be achieved using display:inline with a line-height:160%; but this has the drawback of applying padding left only on first row and padding right only on the last.

这里有一个jsFiddle有两个例子。 第二个类似于所需的行为，但显然填充不正确。

CSS代码的相关部分是：

Relevant part of CSS code is:

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

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

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

How to combine advantages of two approaches?

推荐答案

通过其他的建议使用 box-decoration：break; 属性的灵感，本主题，还找到了此页面以及一些可能的解决方案。

Taking inspiration by other answers that suggested use of box-decoration:break; property, I investigated on this topic, finding also this page with some possible solutions.

实际上（浏览器支持时间不同）的最佳方法是结合引用的Fabien Doiron的box-shadow方法 稍作修改，只解决Firefox 32 +的特定行为。

The best that "actually" (browser support varied during time) is to combine the cited "Fabien Doiron's box-shadow Method" with a little modification to address only specific behaviour of Firefox 32+.

更新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; 以覆盖具有<$ c $的特定Firefox 32+行为

Multiple box-shadow is used in all browsers to mimic lateral padding, while is necessary to add box-decoration-break: clone; to override specific Firefox 32+ behaviour that has box-decoration-break: split; as default.

注意about cross-compatiblity ：

box-decoration-break：clone; 。

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

Rather in Chrome, is (actually) mandatory to NOT set equivalent -webkit-box-decoration-break: clone; because it adds an unwanted horizontal overflow on window resize. So, due to fact that Chrome needs vendor prefix fro this property, declaring it only with standard syntax is a workaround to make it running correctly even in it and also in IE9+

这篇关于为每行分隔的背景颜色的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！