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 jsf

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

Answer 2

The only way this will work is separating the text and adding an class for every one of them this can be done with jquery, you need to make it check the length of your div end when the text wont fit add an extra class.