背景

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

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

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

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

半解决方案

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

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

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

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

原文由 Journey 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.5k

2 个回答

得票最新

✓ 已被采纳

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

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

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

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

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

JavaScript 被禁用
相关祖先的 line-height 以百分比值给出（后代继承计算值），您决定更改您的状态 font-size 。 Example: The ancestor’s font-size is 16px and its line-height is 120% (~ 19px).现在，如果您决定您的状态需要更多注意并声明 .progressStatus {font-size: 24px;} ，它将继承计算出的 line-height （仍然是 19px）。因此，您的行高会小于文本大小。在您的“半解决方案”中明确声明 line-height 可以防止这种情况发生。

原文由 kkoala 发布，翻译遵循 CC BY-SA 3.0 许可协议

对于那些想知道未来会发生什么的人， CSS 值和单位模块第 4 级提出了 lh 相对长度单位：

等于使用它的元素的 ‘line-height’ 属性的计算值，通过仅使用第一个可用字体的度量将 ‘normal’ 转换为绝对长度。

文档的当前状态显示在页面标题下方。在撰写本文时，它处于工作草案阶段。您可以在此处找到与 css-values-4 相关的未解决的 GitHub 问题列表。

示例代码：

 .progressStatus {
    line-height: 1.1;
    height: 42lh;
}

由于动机是使 div 内的文本不调整框的大小，因此您可能还想更改 overflow 属性的值，并确保 box-sizing 的计算值是’不会被其他规则意外设置为 border-box 。

原文由 david-fong 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

推荐问题