使用CSS,我如何根据其(或其父级)行高来调整框的高度?
这将允许容易地使文本区域成为多个行的精确倍数,例如,允许准确显示三行。
我不想要一个javascript解决方案,因为它们通常很慢并且与动态重新渲染的布局交互不良。
修改:我的案例中的行高以无单位数字指定为recommended on MDN,因此如果不需要行高单位,则会很方便让这个工作。
答案 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;
}
这样可以灵活地将变量移动到设置文件中,这样您(或其他人)就可以轻松更改值,而无需查找使用变量的所有选择器。