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

Question

希望 Zoom = 100% 或者如果不是，Zoom = 90%，您可以运行以下代码段并在文本底部看到少量来自应该隐藏的第一行。在我的一台机器上，它以 100% 的缩放比例出现，而另一台以 90% 的比例出现 - 而不是更大的缩放比例。我的机器分别是 Windows 10 home 和 pro。

.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 中不存在），使用您在代码段中看到的代码。

Answer 1

您可以尝试调整最大高度值，但缩小得更远会运行出现问题。你看过-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>

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

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

css

overflow

line-height