背景
我有一个包含状态文本的框(DIV).文本有时会跨越多行,通常只需要一行.状态每秒更新几次(五次),这将导致底部边框和盒子下方的所有内容随着框的更改大小而上下移动以适应其内容.
跳跃的一个解决方案是将DIV的最小高度设置为两行的高度.超过两行的状态文本很少,因此跳跃程度是可以接受的.
或者,我可以将高度设置为两行的确切高度,并使用overflow：hide截断文本.这将消除所有的跳跃,牺牲一些信息.
这提出了一个问题：如何将高度表示为行高的倍数？状态文本从全局样式表继承其外观,不知道字体大小,系列,行高或任何内容.
半解
我可以使用em单元来表达高度,而不知道有关字体的任何内容,但仍然留下还影响最终行高度的行高度属性.
理想情况下,我更喜欢继承行高,但是如果我将其重写为一个已知的乘数,那么我可以强制该框变成两行高.
.progressStatus
{
line-height: 1.1;
height: 2.2em;
}
解决方法
The status text inherits its appearance from the global style sheet and does not know font size,family,line height,or anything.
这不太正确.因为你的状态div中的文本通过级联继承其字体大小,行高等的值,所以它“知道”这些,并将相应地进行风格化.问题是CSS不提供使用这些值进行计算的方式.当声明新属性时,它们才被隐含考虑.
通过JavaScript实现您想要的唯一方法.我用一些jQuery做了一个小提琴here.在我的例子中,一个简单的身体宣言充当祖先.在body CSS中使用不同的font-size和line-height值运行它.
> JavaScript被禁用>相关祖先的线高度以百分比值(后代继承计算值)给出,您决定更改状态字体大小.示例：祖先的字体大小为16像素,其行高为120％(〜19像素).现在,如果你决定你的状态需要更多的关注并声明.progressStatus {font-size：24px;},它将继承计算的行高(仍然是19px).所以你的行高比文本大小小.明确声明“半解”中的线高度可以防止发生这种情况.
