我有一组<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的两个问题:
  • 字体大小更改时很容易受到攻击
  • 文本基线不在正确的位置

  • 这是发生错误时的反例:
  • 字体大小更改,现在您必须再次手动调整最小高度。您不能使用同一类来支持网站上字体大小不同的不同部分。这里的字体大小为30,但最小高度仍设置为20。因此,空跨度不那么高。 :-(

  • 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/

    10-09 15:25
    查看更多