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

【问题标题】：CSS: scale non-text elements based on the system's font sizeCSS：根据系统的字体大小缩放非文本元素
【发布时间】：2021-09-26 14:00:18
【问题描述】：

我正在尝试将一个元素限制为 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，我希望它也可以扩展。有没有办法让这个工作？

【问题讨论】：

我不太明白，因为它看起来好像在您展示的第一个 CSS 中设置了 max-height = 2*line height 但在第二组 CSS max-height = 2em 中。你的 CSS 是什么？您能否使用 CSS 变量作为行高并将 max-height 设置为两倍（显然要删除任何填充）。
@AHaworth 补充说字体大小为 16 像素，但 Android 将其缩放为 20.8 像素。正如预期的那样，最大高度为 2.6*16
为什么当用户修改他们的字体大小偏好时，max-height 会被缩放？我的印象是它只缩放font-size 和line-height 属性，因为它们是唯一与字体大小有关的属性。
@Spectric 对，一个可能的解决方案是以某种方式使容器的高度与字体大小一起缩放。如果max-height 不能缩放，我不知道是否有其他属性或黑客可以缩放高度
@LeoJiang 您可能必须使用 JavaScript 来获取计算的字体大小并动态计算最大高度，或者将字体大小存储在 CSS 变量中并使用 calc() 来计算最大高度。跨度>

【解决方案1】：

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

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

如果您不想使用 JavaScript 实现这一点，您可以使用 CSS 变量和 calc() 函数来实现，正如您问题的评论部分已经提到的那样。

【讨论】：

【解决方案2】：

如果你的文本总是两行，为什么要设置溢出：隐藏，为什么要设置最大高度？

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

【讨论】：

【解决方案3】：

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

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

无论如何，如果支持 line-clamp，就不需要 max-height：

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

【讨论】：