CSS：溢出：隐藏和最大高度是行高的倍数，“隐藏”文本在 Chrome 和 Edge 中渗入视图

问题描述

希望 Zoom = 100% 或者如果没有 Zoom = 90%，您可以运行以下代码段，并在文本底部看到应该是第一行的少量字母顶部隐。在我的一台机器上，它的缩放比例为 100%，另一台机器为 90% - 而不是更大的缩放比例。我的机器分别是 Windows 10 家庭版和专业版。

.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>

我该怎么做才能没有这个问题？我在 Chrome 和 Edge 中都观察到了这个问题（但在 FoxFire 中没有），使用您在代码段中看到的代码。

解决方法

您可以尝试调整最大高度值，但进一步缩小会遇到问题。你看过-webkit-line-clamp吗？如果您不必支持 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>