背景

我有一个包含状态文本的框（DIV）。文本有时会跨越多行，通常只需要一行。状态每秒更新几（5）次，这会导致底部边框和框下方的所有内容在框中更改大小以适合其内容时“上下”跳转。

跳跃的一个解决方案是将DIV的最小高度设置为两条线的高度。具有两行以上的状态文本很少，因此可以接受跳跃程度。

或者我可以将高度设置为两行的确切高度并使用overflow：hide来截断文本。这将以牺牲一些信息为代价消除所有跳跃。

提出了一个问题：如何将高度表示为线高的倍数？状态文本从全局样式表继承其外观，并且不知道字体大小，族，行高或任何内容。

半溶液

我可以使用em单位来表示高度，而不知道有关字体的任何信息，但仍留下行高属性，这也会影响最终的行高。

理想情况下，我更愿意继承行高，但如果我将其覆盖为已知的乘数，那么我可以强制该行变为两行高。

.progressStatus
{
    line-height: 1.1;
    height: 2.2em;
}

这个解决方案足以满足我的需求，但我很好奇是否有更好的解决方案不涉及javascript。

Answer 1

在CSS中无法表达这一点。

状态文本从全局样式表继承其外观，并且不知道字体大小，族，行高或任何内容。

这不太正确。 由于状态div中的文字通过级联继承了font-size，line-height等的值，因此它“知道”这些并相应地设置自己的样式。问题是CSS没有提供使用这些值进行计算的方法。只有在声明新属性时才会隐式考虑它们。

通过JavaScript实现您想要的唯一方法。我使用一些jQuery做了一个小提琴here。在我的例子中，一个简单的body声明充当了祖先。在正文CSS中使用不同的font-size和line-height值运行它。

在实践中，我会将此与您的方法结合起来作为

场景的后备

禁用JavaScript
相关的祖先line-height以百分比值（后代继承计算的值）和决定更改您的状态font-size 。示例：祖先font-size为16px，其line-height为120%（~19px）。现在，如果你确定你的状态需要更多关注并声明.progressStatus {font-size: 24px;}，它将继承计算的line-height（仍然是19px）。因此，您的行高小于文本大小。在“半解决方案”中明确声明line-height会阻止该案例的发生。

Answer 2

div { height: 1em; // that's one line, 2em for 2 lines, etc... line-height: 1em; // the height of one text line overflow: hidden; }

Answer 3

也许使用“共享”变量为您提供了足够接近的解决方案，以实现所需的“继承的线高”，因为使用变量避免了两次定义线高。以您的示例为例，此解决方案将固定高度设置为2.2em（1.1 * 2em = 2.2em = 2行）：

.progressStatus
{
    height: calc(var(--line-height) * 2em);
    line-height: var(--line-height);
    --line-height: 1.1;
}

将2em更改为3em以使用3行高（1.1 * 3em = 3.3em）。

如果变量也可以在所有嵌套元素中可见，直到被覆盖，则也可以在DOM层次结构中的更高位置定义变量-line-height。