1

我基本上是在尝试使用包含文本缩进的段落来执行此操作，但无法获得它，因为 display:inline 不允许文本缩进。有任何想法吗？

4

2 回答 2

4

使用伪元素

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

如果您需要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在印刷术语中使用 em 的 1/5 或有时 1/6。如果我们font-size将这两个伪元素设置为 6 像素，那么无论尺寸差异如何，薄空间都应始终接近 1 像素宽度。

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

上部样式定义将在每侧添加 1 个像素的空间。如果我们在 content 中放置 5 个细空间，我们将得到 5 个像素空间......

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

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

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

于 2012-11-04T15:47:41.197 回答
3

没有 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 */
}
于 2015-07-24T13:13:23.810 回答