根据行高的CSS高度

时间:2013-08-08 08:07:44

标签: css

使用CSS,我如何根据其(或其父级)行高来调整框的高度?

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

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

修改:我的案例中的行高以无单位数字指定为recommended on MDN,因此如果不需要行高单位,则会很方便让这个工作。

1 个答案:

答案 0 :(得分:4)

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

如果行高是2st(或无单位)并且你希望盒子的总高度为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;
}

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