8

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

enter image description here 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

Community
  • 1
  • 1
cool
  • 2,755
  • 3
  • 27
  • 54

5 Answers5

3

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

Mr. Alien
  • 147,524
  • 33
  • 287
  • 271
  • Yes, but as stated in the question, we do not want to reduce the line height. I am looking for another solution. Also, why to use display: inline-block and div, as i already have wich is inline element?? – cool Oct 29 '12 at 17:03
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. :)

youare
  • 146
  • 1
  • 2
  • 12
1

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>
Fabio Esposito
  • 31
  • 2
1

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>
thingEvery
  • 3,324
  • 1
  • 18
  • 25
  • Testing would be different for sure after 6 years, having in mind that browsers changed - and rendering as well I suppose. At the time when question was asked, using image repetition was optimal (and probably only solution for specific issue I had - where line height had to be unchanged). I hope someone can try solution you posted and confirm does it work or not. – cool Jan 24 '20 at 18:20
1

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);
Austen
  • 1,902
  • 2
  • 19
  • 28