0

Someone probably had the same issue, but can't find anything. It seems like line-height css doesn't match the actual height of the line

Here is the text css properties:

.description{
    line-height:17px;
    font-size:14px;
    height:85px;
    overflow:hidden;
}

so normally, since 17px * 5 = 85px, we should only see 5 lines, but as you can see on the pic, the top of the next line is showing up. It behave like if line-height is about 16.7px and not 17px. Is there a way to correct that?

I try with different height (102px, 170px, etc..) , and the higher the box is, bigger the gap is (at 255px, we can see half of the next line )

enter image description here

Update: A comparison of my result with 255px box (issue) and the expected result (like jsfiddle)

js fiddle : https://jsfiddle.net/eo7pkzqt/28/ enter image description here

pajouk
  • 115
  • 8
  • 1
    Can you create a jsfiddle version, sometimes it happen for side impact. – Hanif Aug 07 '18 at 06:16
  • oddly, with the exact same configuration in fiddle, it work just fine (same browser Chrome) – pajouk Aug 07 '18 at 07:19
  • 1
    @LGSon how is this duplicate? you answer doesn't answer to the question – pajouk Aug 07 '18 at 07:46
  • also using your own answer : 'Conclusion Line-height defines div height, unless line-height is very small, in which case the font-size will define the size' so clearly the answer – pajouk Aug 07 '18 at 07:51
  • Adjust the zoom level and see how the overlap changes. This is a classic cumulative rounding error. – Alohci Aug 07 '18 at 11:06
  • @Alohci thx man , it seems very plausible, is there a way to fix this? – pajouk Aug 09 '18 at 01:19

1 Answers1

-1

Refer this

See line-he is depended on font-size,font-family....etc so variation comes using line-height

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
unknown
  • 1
  • 1
    so you'r saying that if i set line-height to 20px, it won't be 20px? that will be odd. In that case why is it working with the fiddle but not in my version. Am I missing something? – pajouk Aug 07 '18 at 08:09