javascript - Same padding at start and end of each line

Question

I have a span element with some text in it. I want the text to have a solid background color as well as start/end each line with the same amount of padding.

This jsfiddle shows the problem: http://jsfiddle.net/VwsQg/

I found this very similar question: Add padding at the beginning and end of each line of text, but i need some space between each line as well.

This image illustrates the result I'm trying to accomplish:

Thank you in advance.

Answer 1

This can be done without using JavaScript or an extra element for each line.

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

See how it works on fiddle 3tP8m.

Note: An ancestor of .marker element should have proper padding to contain this element correctly.

All credits of this technic goes to Artem Polikarpov. See his original advice: “How to mark up the text on flexible bottom layer” (in Russian).