36

在没有硬编码行高或字体大小的情况下，如何在纯 CSS 中将 div 的高度表示为其行高的倍数？

背景

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

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

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

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

半解决方案

我可以在不了解字体的情况下使用 em 单位来表示高度，但这仍然会留下行高属性，这也会影响最终的行高。

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

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

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

4

3 回答 3

11

没有办法在 CSS 中表达这一点。

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

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

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

在实践中，我会将其与您的方法结合起来，作为后备方案

  1. JavaScript 被禁用
  2. 相关祖先的line-height以百分比值的形式给出（后代继承计算值），您决定更改您的状态font-size。示例：祖先的font-sizeis16px和它的line-heightis 120%(~ 19px)。现在，如果您决定您的状态需要更多关注并声明.progressStatus {font-size: 24px;}，它将继承计算的line-height（仍然是 19px）。因此，您的行高会小于文本大小。line-height在“半解决方案”中明确声明 a可以防止这种情况发生。
于 2013-06-03T16:12:34.687 回答
4 
div {
  height: 1em; // that's one line, 2em for 2 lines, etc...
  line-height: 1em; // the height of one text line
  overflow: hidden;
}
于 2017-03-05T09:38:43.077 回答
0

也许使用“共享”变量为您提供了一个足够接近的解决方案来实现您想要的“继承的行高”，因为它使用变量避免了两次定义行高。以您的示例为例，此解决方案将固定高度设置为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) 。

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

于 2020-12-07T14:55:49.847 回答