CSS：根据系统的字体大小缩放非文本元素

Question

我试图将一个元素限制为 2 行文本，我想要 -webkit-line-clamp 的后备。当系统默认字体大小为默认时，此解决方案有效：

line-height: 1.3em;
max-height: 2.6em;
overflow: hidden;

但是，在Android，如果我改变系统的字体大小，第二行的底部被截断：

字体大小为 16px，但使用 Android 的缩放比例 (1.3x)，计算出的样式为：

font-size: 20.8px;
line-height: 27.04px;
max-height: 41.6px;

所以看起来 font-size 和 line-height 被缩放了，但 max-height 没有缩放。由于 max-height 基于 em，我希望它也能扩展。有什么办法可以做到这一点吗？

Answer 1

前段时间我遇到了类似的问题。那时，我通过编程改变高度来解决它。

这样做，您就有可能包含实现类似功能所需的逻辑。

如果您不想使用 JavaScript 实现此功能，您可以使用 CSS 变量和 calc() 函数来实现，因为它已在您的评论部分中提到问题。

Answer 2

If your text is always two lines, why do you want to set the overflow: hidden and why set the max-height?

我认为你应该为文本设置 font-size 和 line-height，并让 div 高度自动，如果用户增加字体大小，那么你的 div 高度将之前大一点

Answer 3

您可能真的不需要 max-height 作为后备方案，因为所有现代浏览器都支持 line-clamp：https://caniuse.com/css-line-clamp

在旧版浏览器中显示整个文本而不是降低块高度会不会更正确？否则用户可能不会意识到文本被裁剪了。

无论如何，如果支持线夹，则不需要最大高度:

    @supports (-webkit-line-clamp: 2) {
        .header {
            max-height: none;
        }
    }

CSS: scale non-text elements based on the system's font size