Wrapped Text Background Overlapping other text on different line

Question

I'm having a problem with line-height + text background styling with css.

<style>
.wrap  {
    width: 70%; 
    line-height:0.9;
}
.hl {

        background-color: orange;
}
</style>
<div class="wrap">
       <span class="hl">
          Some content will go here which will be split into several lines depending of resolution (depending on width of wraper)
       </span>
</div>

I have dynamic text that wraps to multiple lines depending on browser width The line-height for this text is less then 'normal'. When I apply a background color to the text, this background overlaps the bottom of the descender letters : g,p,y,q,j

It seems that the text is rendered in the browser such that the second/lower line of text (and its background color) is in front of the first/upper line of text, thus this second line's background is in front of the descender letter due to the line-height.

Each row gets a NEW background, because we are talking about an inline element. I need to use inline element of course to get text background. I need to solve this problem with css or JS, without changing the text line height of the text.

Additional infos: I found a great answer here: Add padding at the beginning and end of each line of text

Answered by thirtydot (accepted answer right below question), but if you check his live demo solution, and change line-height there to a smaller value, you will get the same problem as I have. Demo

Answer 1

One solution: if you want to keep your line-height smaller than 'normal', instead of using a color background, use a repeating png image. Add a transparent area at the top of this png equal to the height of the overlap. :)