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

Because your line-height is less and as I can see you are applying background color to your text, so increase your line-height and more over there is no unit specified, like em or px to your line-height property and btw no need of adding padding to it

Try this :

line-height:25px;

More Info: you need to give inline-block; because you are using span, you can simply use a div instead

Answer 2

For anyone unsatisfied with the current answers, I found a solution that allows any line-height and works for text breaking across lines. Use a gradient background-image. You may need to adjust the percentage for your needs.

background-image: linear-gradient(to bottom, transparent, transparent 17%, orange 17%, orange);

Answer 3

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

Answer 4

Wrap the text inside a span and set the span position as relative. This will do!

CSS:

.your-backgrounded-h1-class span { position: relative; }

HTML:

<h1 class="your-backgrounded-h1-class"><span>Your Text!</span></h1>

Answer 5

Give the <span> display: inline-block;

.wrap {
  width: 70%;
  line-height: 0.9;
}

.hl {
  font-size: 3em;
  background-color: orange;
  display: inline-block;
}

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

Answer 6

Late to the party here… and obviously CSS has changed since the original poster asked the question, but this seems to work at least in recent Chrome + Firefox for me:

Basically you can use an outer <span> to set the background color, then use an inner <span> with the text, and set position: relative on the inner span to create a new stacking context. This results in the text of the inner span all rendering in a layer above the background color.

Here's a demo codepen:

https://codepen.io/techieshark/pen/abRZvvx

and the same thing but embedded below. Note the top shows with an undesired overlap and the bottom should show without.

.padded-multiline { 
  line-height: 0.9;

  /* just for the demo */
  width: 400px;
  margin: 1.75em auto;
}

.background-color { 
  background-color: black;
  border: 1px solid rgba(255, 255, 220, .3);
  color: #fff; 
  padding: 0.5rem 2rem;
  
  /* 'clone' is what essentially copies the padding to the individual lines */
  box-decoration-break: clone;
  /* Needs prefixing! 
     see https://caniuse.com/css-boxdecorationbreak */
  -webkit-box-decoration-break: clone;
}

.new-stack-context {
  position: relative;
}


/* just for the demo */
em {
  font-style: normal;
  color: #c0c;
}

body {
  padding: 1rem;
  background: #013968;
}

<h1 class="padded-multiline">
  <span class="background-color"><em>How do I</em> add (horizontal) padding to subsequent lines of an inline text element? And use tight line height without background color obscuring text?</span>
</h1>

<h1 class="padded-multiline">
  <span class="background-color"><span class="new-stack-context"><em>How do I</em> add (horizontal) padding to subsequent lines of an inline text element? And use tight line height without background color obscuring text? <br/> Like this!</span>
</h1>

For reference in case anyone has a browser not rendering as mine is, here is how Chrome renders this in 2023:

The padding bit is inspired by "Adam Campbell’s box-decoration-break Method" documented/described by Chris Coyier here: https://css-tricks.com/multi-line-padded-text/

For completeness, here's similar code as demo above but updated to match more closely to the image from the original question:

.padded-multiline { 
  line-height: 0.9;

  /* just for the demo */
  width: 800px;
  margin: 1.75em auto;
  font-family: sans-serif;
}

.background-color { 
  background-color: #EAEAEA;
  border: 2px solid gold;
  color: black; 
  padding: 0.5rem 2rem;
  
  /* 'clone' is what essentially copies the padding to the individual lines */
  box-decoration-break: clone;
  /* Needs prefixing! 
     see https://caniuse.com/css-boxdecorationbreak */
  -webkit-box-decoration-break: clone;
}

.new-stack-context {
  position: relative;
}



body {
  padding: 1rem;
  background: white;
}

<h1 class="padded-multiline">
  <span class="background-color"><span class="new-stack-context">Stop crying and just <br/>keep hustling</span>
</h1>

(Gold border included to help see what is happening.)