如何设置空的span高度等于默认行高？ [英] How to set empty span height equal to default line height?

问题描述

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

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

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

解决方案

strong>和强大解决方案：

  span.item：empty：before {
 content ：\200b; // unicode零宽度空格字符
} 
  

2015 ：不使用 \00a0 不间断的空间，请使用 \200b 也是一个不间断的空间，但宽度为零。有关详情，请参阅我的其他答案：

2. 您的空白区域的最小高度是正确的，但它与周围的文本没有正确对齐，基线不正确。看下面的Huh？行：

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> 
是！ < span class =correct>< / span> 
< / div> 
  

css：

 code> .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; 
} 
  

I have a set of <span> elements (each of them is nested to correspondent <div>). They build a stack of panels, like in the picture below.

When span contains some text, it has a normal height. But when it is empty, it's height is 0px. But I need it to have a normal height (to make it look like in the picture).

How to achive this behavior? (I tried to insert a space, but maybe there's a better solution).

解决方案

Here is a simple and robust solution:

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

(Update 12/18/2015: rather than using \00a0 non-breaking space, use \200b, which is also a non-breaking space, but with zero width. See my other answer at http://stackoverflow.com/a/29355130/516910)

This CSS selector only selects the spans that are "empty", and injects some content into that empty space, namely a non-breaking space character. So no matter what font size and line-height you have set, everything around that <span> will fall into line, just as if you had text present in that <span>, which is probably what you want.

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

The result looks like this:

---

I see two problems with using min-height:

1. it is vulnerable where font sizes change
2. the text baseline is not in the correct place

Here's what the counter-examples look like when things go wrong:

1. The font size changes, and now you have to hand tune the min-height again. You can't use the same class to support different parts of your website where font sizes are different. Here the font size in this place is 30, but the min-height is still set to 20. So the empty spans are not as tall. :-(

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

2. Your empty span has the correct height with min-height, but it doesn't line up correctly with the text surrounding the span. The baseline falls incorrectly. Look at the line that says "Huh?" below:

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

Code for this last example:

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

这篇关于如何设置空的span高度等于默认行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！