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

Question

我有一组<span>元素（每个元素都嵌套到对应的<div>）。他们构建了一堆面板，如下图所示。

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

如何实现这种行为？ （我试图插入一个空格，但也许有更好的解决方案）。

Answer 1

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

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

（ 2015年12月18日更新：而不是使用\00a0非中断空格，使用\200b，这也是一个不间断的空间，但没有在https://stackoverflow.com/a/29355130/516910）

看到我的另一个答案

此CSS选择器仅选择＆＃34; empty＆＃34;的跨度，并将一些内容注入该空白空间，即一个不间断的空格字符。因此，无论您设置了什么字体大小和行高，<span>周围的所有内容都会排成一行，就像您在<span>中有文字一样，这可能是您想要的。< / p>

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

结果如下：

---

我发现使用min-height存在两个问题：

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

以下是出现问题时反例的情况：

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

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



1. 您的空跨度具有最小高度的正确高度，但它没有与跨度周围的文本正确对齐。基线不正确。看看那句话＆＃34;嗯？＆＃34;下面：

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;然后添加min-height

Answer 3

从图片中可以看出，您已经在display: block元素上设置了span。如果没有，请添加。或者，请考虑使用div。这两个元素之间的区别在于span默认为内联，div默认是块，所以为什么不使用后者？

然后，您需要将min-height设置为等于具有内容的项目的高度的值。这通常取决于它们的线高。默认行高因字体（和浏览器）而异，因此要获得一致的结果，请明确设置行高，例如

* { line-height: 1.25; }
span { min-height: 1.25em; }

Answer 4

也许这会奏效 -

span{
  min-height:16px;
}