By adjusting the zoom level to either 100% or 90%, you can execute the following Snippet and notice that at the bottom of the text, there is a slight overlap of the top part of the letters from the first line which should be hidden. This issue seems to occur on one of my Windows 10 machines with Zoom set at 100% and another machine with Zoom set at 90%, but doesn't occur at larger zoom levels.
.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>To prevent this issue, what steps should I take? This problem has been observed in Chrome and Edge (but not in Firefox) while using the code featured in the Snippet.