每行的开头和结尾都有相同的填充

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)。

Answer 2

唯一可行的方法是分离文本并为每一个添加一个类，这可以通过jquery来完成，你需要让它在文本不适合时检查div结尾的长度添加一个额外的类