7

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:

enter image description here

Thank you in advance.

Community
  • 1
  • 1
Martin
  • 2,302
  • 2
  • 30
  • 42

2 Answers2

6

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

Pavlo
  • 43,301
  • 14
  • 77
  • 113
  • That's great! It almost works in all browsers. I've tested Chrome, Safari, Firefox, Internet Explorer 9, 8 and 7. It didnt work in Internet Explorer 7. Is it possible to fix that? – Martin Sep 08 '12 at 15:23
  • 3
    Fix what, the browser? A quote from the source: “Given examples aren't displayed well in IE6 and 7, but passably enough to be taken for graceful degradation.” – Pavlo Sep 08 '12 at 15:59
0

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.

Ivo
  • 2,588
  • 6
  • 25
  • 43
  • 1
    A jQuery solution would be fine. Can you give an example of how to solve this with jQuery? – Martin Sep 08 '12 at 13:21