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

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

此JSFIDLE显示了问题：

我发现了一个非常相似的问题：，但我需要在每行之间留出一些空间

此图说明了我试图实现的结果：

---

提前谢谢。

唯一有效的方法是分离文本并为每一个文本添加一个类。这可以通过jquery完成，当文本不适合添加额外的类时，您需要让它检查div end的长度。

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

HTML 看看它是如何工作的

注意：元素

.marker

的祖先应具有适当的

填充

，以正确包含此元素

---

这项技术的所有功劳都归Artem Polikarpov所有。请参阅他的原始建议：。

我认为不为每行使用额外的元素是不可能的。jQuery解决方案就可以了。你能举例说明如何用jQuery解决这个问题吗？太好了！它几乎适用于所有浏览器。我测试过Chrome、Safari、Firefox、InternetExplorer9、8和7。它在InternetExplorer7中不起作用。有可能修复吗？修复什么，浏览器？该消息来源引用了一句话：“给定的示例在IE6和IE7中没有很好地显示出来，但足以被认为是优雅的降级。”

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

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

.marker .marker { left: 20px; }

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