如何设置空跨度高度等于默认行高？

Question

我有一组<span>元素(每个元素都嵌套到通讯员<div>).他们构建了一叠面板,如下图所示.

当span包含一些文本时,它具有正常高度.但是当它是空的时,它的高度是0px.但我需要它有一个正常的高度(使它看起来像在图片中).

如何实现这种行为？(我试图插入一个空格,但也许有更好的解决方案).

Answer 1

这是一个简单而强大的解决方案:

span.item:empty:before {
  content: "\200b"; // unicode zero width space character
}

(2015年12月18日更新:\00a0使用\200b,这也是一个不间断的空间,但宽度为零.请参阅/sf/answers/2054859131/上的其他答案.)

此CSS选择器仅选择"空"的跨度,并将一些内容注入该空白空间,即一个不间断的空格字符.所以无论你设置了什么字体大小和行高,它周围的一切<span>都会排成一行,就好像你有文字一样<span>,这可能是你想要的.

http://plnkr.co/edit/eXHphA?p=preview

结果如下:

我发现使用时遇到两个问题min-height:

1. 它在字体大小改变时很容易受到攻击
2. 文本基线不在正确的位置

这是反例在出现问题时的样子:

1. 字体大小会改变,现在您必须再次手动调整最小高度.您不能使用同一个类来支持字体大小不同的网站的不同部分.这里这个地方的字体大小是30,但是最小高度仍然设置为20.所以空跨度不是那么高.:-(

http://plnkr.co/edit/zeEvca?p=preview

2. 您的空跨度具有最小高度的正确高度,但它与跨距周围的文本无法正确对齐.基线不正确.看看那句"嗯？" 下面:

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";
}

Answer 2

您可以设置范围显示:inline-block; 然后添加最小高度