我有一组<span>
元素(每个元素嵌套到对应的<div>
)。他们构建了一组面板,如下图所示。
当span包含一些文本时,它具有正常的高度。但是当它为空时,其高度为0px。但是我需要它具有正常的高度(以使其看起来如图所示)。
如何实现这种行为? (我试图插入一个空格,但也许有更好的解决方案)。
最佳答案
这是一个简单而强大的解决方案:
span.item:empty:before {
content: "\200b"; // unicode zero width space character
}
(2015年12月18日更新:使用
\00a0
而不是\200b
不间断空格,它也是一个不间断空格,但宽度为零。请参阅我在https://stackoverflow.com/a/29355130/516910上的其他回答)此CSS选择器仅选择“空”跨度,并将一些内容注入(inject)该空白空间,即不间断的空格字符。因此,无论您设置了什么字体大小和行高,该
<span>
周围的所有内容都会对齐,就像您在<span>
中显示文本一样,这可能就是您想要的。http://plnkr.co/edit/eXHphA?p=preview
结果看起来像这样:
我看到使用
min-height
的两个问题:这是发生错误时的反例:
http://plnkr.co/edit/zeEvca?p=preview
http://plnkr.co/edit/GGd7mz?p=preview
最后一个示例的代码:
<div class="group">
Hello <span class="item">Text</span>
</div>
<div class="group">
Huh? <span class="item"></span>
</div>
<div class="group">
Yes! <span class="correct"></span>
</div>
CSS:
.group {
background-color: #f1f1f1;
padding: 5px;
font-size: 20px;
margin-bottom: 20px;
}
.item {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
min-height: 20px;
}
.correct {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
}
.correct:empty:before {
content: "\00a0";
}
关于html - 如何将空跨距高度设置为默认线高?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14217902/