[SOLVED] CSS: with overflow: hidden and max-height a multiple of line-height, "hidden" text bleeds into view in Chrome and Edge

CSS: with overflow: hidden and max-height a multiple of line-height, "hidden" text bleeds into view in Chrome and Edge

Hopefully with Zoom = 100% or if not, with Zoom = 90%, you can run the following Snippet and see at the bottom of the text is a small amount of the top of the letters from the first line that should be hidden. On one of my machines it appears with Zoom at 100% and another at 90% - and not at larger zooms. My machines are Windows 10 home and pro, respectively.

.myclass{
font-family: sans-serif;
width: 10rem;
line-height: 1.1rem;
max-height: 5.5rem;
overflow: hidden;
}

<div class="myclass">Lorem ipsum dolor sit amet, primis putent atomorum eum ex. Mea ei vidit iriure tamquam, mea nostrud eleifend ei. His te verear timeam, id mel lucilius reprimique.
</div>

What can I do so that I don't have this problem? I have observed this problem in both Chrome and Edge (but it is absent in FoxFire), using the code you see in the Snippet.

Solution

You can try to tweak your max-height value but will run into issues by zooming out even farther. Have you looked at -webkit-line-clamp? It works pretty well if you don't have to support IE:

.myclass {
  font-family: sans-serif;
  width: 10rem;
  line-height: 1.1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

<div class="myclass">Lorem ipsum dolor sit amet, primis putent atomorum eum ex. Mea ei vidit iriure tamquam, mea nostrud eleifend ei. His te verear timeam, id mel lucilius reprimique.
</div>