当文本设置为空白时，如何保留文本贡献的高度

Question

考虑一个内联块CSS元素，它可以包含文本，并且有一些很好的填充。

根据内联块中是否有任何文本，元素的高度会有所不同：

.text-holder {
display: inline-block;
color: #ffffff;
padding: 10px;
vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

如何确保这些元素的高度相同，无论元素内是否有任何文本，也无论字体大小如何？

起初我考虑过min-height，但我认为这不适用于可变字体大小。

Answer 1

为空时使用零空格字符：

.text-holder {
display: inline-block;
color: #ffffff;
padding: 10px;
vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }
.text-holder:empty::before {
content:"200B";
}

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

您也可以为所有元素保留它，因为它的宽度为 0：

.text-holder {
display: inline-block;
color: #ffffff;
padding: 10px;
vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }
.text-holder::before {
content:"200B";
}

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

只需注意是否有前导空格：

.text-holder {
display: inline-block;
color: #ffffff;
padding: 10px;
vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }
.text-holder::before {
content:"200B";
}

<div class='text-holder black'>I HAVE TEXT</div><br>
<div class='text-holder black'> I HAVE TEXT</div>
<div class='text-holder grey'></div>

Answer 2

我能想到的唯一方法就是使用弹性框。请参阅下面的代码。基本上，将父级设置为display: flex;，并且应该使每行上的所有高度保持不变。因此，如果第 2 行的字体很小，那么一行的高度将相等，但高度将全部小于第 1 行

.parent {
display: flex;
flex-wrap: wrap;
}
.child {
padding: 10px;
border: 1px dashed #ddd;
display: flex;
align-items: center;
}
.lg {
font-size: 30px;
}
.md {
font-size: 20px;
}
.sm {
font-size: 14px;
}

<div class='parent'>
<span class='child lg'>some text</span>
<span class='child sm'>text more text</span>
<span class='child md'>child asdf</span>
<span class='child lg'>asl;fkj s</span>
<span class='child lg'>asdf</span>
<span class='child md'>asdf 1</span>
<span class='child sm'>alsdfj </span>
<span class='child lg'>asldfkj</span>
<span class='child sm'>asldfkj</span>
</div>