用text-indent填充内联文本的背景色 [英] Padding for background color of an inline text WITH text-indent

问题描述

我基本上是在尝试的段落包含text-indent，但由于display:inline不允许text-indent而无法获取.有什么想法吗?

I am basically trying to do THIS with a paragraph that contains text-indent, but can't get it because the display:inline won't allow text-indent. Any ideas?

推荐答案

使用伪元素

我创建了一个 JSFiddle示例，该示例使用了span元素，这些元素是inline，然后添加before和after伪元素，以在每个突出显示的文本块的前面和结尾添加额外的间距.

Using pseudo elements

I've created a JSFiddle example that uses span elements which are inline and then adds before and after pseudo elements to add additional spacing in front and at the end of each highlighted block of text.

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

In case you need to manipulate amount of that space adjust font-size within those pseudo elements and you should be good to go.

诀窍只是:

.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伪元素中使用适当的字符，实际上可以控制增加的间距到单个像素.

Controlling space amount

Using appropriate character(s) in :before and :after pseudo elements one can actually control amount of added spacing down to individual pixels.

最好的方法是使用thin space，它是印刷字样的1/5或1/6.如果将这两个伪元素的font-size设置为6个像素，则无论尺寸差异如何，稀疏空间都应始终近似于1个像素宽度.

The best way is to use thin space which is in typographical terms 1/5 or sometimes 1/6 of an em. If we set font-size of these two pseudo elements to 6 pixels thin space should always approximate to 1 pixel width regardless of dimension discrepancies.

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

上部样式定义将在每侧增加1个像素的空间.如果我们在内容中放置 5个稀疏空间，我们将获得5个像素空间...

Upper style definition will add 1 pixel of space on each side. If we put 5 thin spaces in content, we'd get 5 pixel space...

或者使用一个较细的空间并为其添加填充并以此方式控制其宽度.甚至取消任何内容，仅使用填充:

Or use one thin space and add padding to it and control its width this way. Or even abolish any content and just use padding:

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

但是，可以将空间量控制到像素粒度.

However one does it it's possible to control amount of space down to pixel granularity.

这篇关于用text-indent填充内联文本的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！