css - 以行高表示的 CSS 高度

Question

使用 CSS，我如何根据其（或其父级）的行高来调整框的高度？

这将允许容易地使文本区域成为行数的精确倍数，例如允许精确地显示三行。

我不想要一个 javascript 解决方案，因为它们通常很慢并且与动态重新渲染的布局交互很差。

编辑：按照MDN 的建议，在我的情况下，行高以无单位数字指定，因此如果不需要行高单位来使其工作，它会很方便。

Answer 1

我不确定我是否完全理解了这个问题，但你不能只使用相对单位 - ems 吗？

例如，如果行高为 2ems（或无单位），并且您希望框的总高度为 3“行”高（可能不考虑填充），那么您可以将高度设置为 6ems。这样，行高会根据您的基本单位（字体大小）灵活变化，并且使用相同的基本单位，高度也将是可变的。

这是一个例子：

.myBox {
     line-height: 2; // this will be twice the value of the font-size
     height: 6ems; // equivalent to 3 lines high

要在 SASS 中实现相同的目标，您可以编写：

$lineheight: 2; // this value can be unitless or a unit like ems, px or percentage
$numberoflines: 3; 
.myBox {
    line-height: $lineheight;
    height: $lineheight * $numberoflines;
}

这将使您可以灵活地将变量移动到设置文件中，以便您（或其他人）可以轻松更改值，而无需找到所有使用变量的选择器。