CSS的行高

y53ybaqx  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(88)

使用CSS,我如何根据它(或它的父对象)的行高来调整一个框的高度?
这将允许容易地使文本区域精确地为行数的倍数,例如,以允许精确地示出三行。
我不想要一个javascript的解决方案,因为它们通常很慢,并且与动态重新渲染的布局交互很差。

**编辑:**在我的例子中,行高是用无单位的数字指定的,正如MDN上所推荐的那样,所以如果不需要行高单位来实现这一点,那就很方便了。

vi4fp9gy

vi4fp9gy1#

我不确定我是否完全理解了这个问题,但你不能用相对单位吗?
例如,如果行高为2ems(或无单位),而您希望方框的总高度为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;
}

这将使您能够灵活地将变量移动到设置文件中,以便您(或其他人)可以轻松地更改值,而不必找到使用这些变量的所有选择器。

q3qa4bjr

q3qa4bjr2#

下面是我使用的一个变通方法

<div style="display: flex; border: 1px solid red">
    <div>
        <br>
        <br>
        <br>
    </div>
    <div>
        This text will appear in a box that has a height of at least 3 lines.
    </div>
</div>

相关问题