0

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.

Reid
  • 3,170
  • 2
  • 23
  • 37

1 Answers1

1

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>
CodeNinja
  • 616
  • 4
  • 18