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

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所有.请参阅他最初的建议:"如何标记柔性底层上的文字"(俄语).