带空元素的div或span的最小高度 [英] Minimum height for div or span with empty element

问题描述

当我在 span 或 div 中包含一个刚好是空字符串或仅包含空格的字符串，该部分没有任何高度，当 span 或 div 进一步嵌入到类似 table ，那个单元格没有足够的高度，看起来错了。如何确保 span 或 div 至少占用字符串中其他字符的高度？这就像在TeX中执行 \strut 。我可以插入一些东西到字符串，或调整css。

我试过，把下面的相关的CSS类，但问题是，我必须手动调整字符串高度（我不知道如果它是1em。可能不是）。正确的方法是什么？

min-height：1em;

解决方案

如果要设置其高度，您的 span 元素需要成为块元素。因此，视情况设置样式 display：block 或 display：inline-block 。

  span.item {
 display：inline-block; 
} 
  

要设置空白区域的高度，最好只是注入& nbsp; ，而不是设置最小高度。 （ UPDATE ：per @sawa，而不是使用不间断的空格字符，也许更合适的字符会占用空格，即unicode ZERO WIDTH SPACE字符， \200b 。）

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

这将适用于任何字体大小并且它避免了基线不与相邻文本排列在一起的问题。看看那行说嗯？

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

（查看类似问题： http： //stackoverflow.com/a/29354766/516910 ）

When I enclose within span or div a string that happens to be an empty string or includes only white spaces, that part does not have any height, and when that span or div is further embedded into something like a table, that cell does not have enough height, and looks wrong. How can I ensure that a span or div takes up at least the height of when the string has other characters? This is something like doing \strut in TeX. I can either insert something into the string, or adjust the css.

I tried, putting the following into the relavant css class, but the problem is that I have to manually adjust the string height (I am not sure if it is "1em". Probably not). What is the right way to do this?

min-height : 1em;

解决方案

Your span element needs to become a block element if you want to set its height. So set the style display: block or display: inline-block as appropriate.

span.item {
  display: inline-block;
}

To set the height of an empty span, I've found it best to simply inject a   rather than set a min-height. (UPDATE: per @sawa, rather than using a non-breaking space character, perhaps a more suitable character would take up no space, i.e. the unicode ZERO WIDTH SPACE character, \200b.)

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

This will work for whatever the font size may be, and it avoids problems with the baseline not lining up with adjacent text. Look at the line that says "Huh?" below:

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

(See similar question: http://stackoverflow.com/a/29354766/516910)

这篇关于带空元素的div或span的最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！