javascript - 每行开头和结尾的填充相同

Question

我有一个 span 元素，其中包含一些文本。我希望文本具有纯色背景颜色，并以相同数量的填充开始/结束每一行。

这个jsfiddle显示了问题：http: //jsfiddle.net/VwsQg/

我发现了这个非常相似的问题：在每行文本的开头和结尾添加填充，但我也需要在每行之间留一些空间。

这张图片说明了我试图完成的结果：

先感谢您。

Answer 1

这可以在不使用 JavaScript 或每行的额外元素的情况下完成。

HTML

<span class="marker"><span class="marker"><span class="marker">
    consectetur adipiscing elit. Nam at sem eu ligula porttitor iaculis volutpat
    non lacus.
</span></span></span>

CSS

.marker {
    background: #f77;
    padding: 3px 0;
    position: relative;
    left: -10px;
    line-height: 30px;
}

.marker .marker { left: 20px; }

.marker .marker .marker { left: -10px; }

看看它在小提琴 3tP8m上是如何工作的。

注意：元素的祖先.marker应该具有正确padding包含此元素的权限。

这项技术的所有功劳归于 Artem Polikarpov。请参阅他最初的建议：“如何在灵活的底层上标记文本”（俄语）。

Answer 2

唯一可行的方法是分隔文本并为每个文本添加一个类，这可以使用 jquery 完成，当文本不适合添加额外类时，您需要检查 div 结尾的长度。