填充内联文本的背景颜色与文本缩进

Question

我基本上尝试使用包含text-indent的段落THIS，但无法获取它，因为display：inline不允许使用text-indent。有什么想法吗？

Answer 1

使用伪元素

我创建了一个使用span inline元素的JSFiddle example，然后添加了before和after个伪元素，以便在前面添加额外的空格并在每个突出显示的文本块的末尾。

如果您需要操纵该空间的数量，请在这些伪元素中调整font-size，您应该好好去。

诀窍就是：

.highlight {
    font-family: Helvetica, Sans-serif;
    font-size: 48pt;
    font-weight: bold;
    text-transform: uppercase;
}
    .highlight:before,
    .highlight:after {
        /* no-breaking-space (nbsp) entity */
        content: "\00a0";
    }

控制空间量

在:before和:after伪元素中使用适当的字符，实际上可以控制添加的间距到单个像素的数量。

最好的方法是使用thin space，这是印刷术的1/5或有时1/6的em。如果我们将这两个伪元素的font-size设置为6个像素，则无论尺寸差异如何，薄空间都应始终接近1个像素宽度。

.highlight:before,
.highlight:after {
    content: "\2009";
    font-size: 6px;
}

上部样式定义将在每侧添加1个像素的空间。如果我们放5 thin spaces in content，我们就会得到5个像素的空间......

或者使用一个薄空间并为其添加填充并以此方式控制其宽度。甚至废除任何内容，只使用填充：

.highlight:before,
.highlight:after {
    content: "";
    padding: 0 5px; /* will give 10px space */
}

然而，人们可以将空间量控制为像素粒度。

Answer 2

没有br标签：这里演示：http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}