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

Question

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

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

我发现了这个非常相似的问题:Add padding at the beginning and end of each line of text ，但我也需要在每行之间留出一些空间。

这张图片说明了我要实现的结果:

提前谢谢你。

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; }

查看它在 fiddle 3tP8m 上的工作原理.

注意:.marker 元素的祖先应该有适当的padding 以正确包含此元素。

这项技术的所有功劳归于 Artem Polikarpov。查看他的原始建议:“How to mark up the text on flexible bottom layer” (in Russian) .