css - 如何忽略空跨度

Question

我有一个菜单元素列表。这包含元素名称、价格、描述和附加列表。如果描述被遗漏，它包含的 span 仍然会填满空间，即使它是空的。 description 和 extras CSS 是同一个类，但如果需要可以更改。这正在引导超大屏幕中使用。

HTML

<div id="item_124">
    <span class="left">Cheeseburger</span>
    <span class="right"> 2.50</span>
    <span class="center">&nbsp;</span>
    <span class="description">Burger full o cheese</span>
    <span class="extras"><b>OPTIONS:</b> OP1, OP2, OP3, Onion, Cheese, Tomato, Bacon</span>
</div>

CSS

#menuOutput .description, .extras{
    line-height: 7px;
    font-style: italic;
    font-size: 12px;
    margin-bottom: 10px;
}

结果

• 当前结果

  Cheeseburger 2.50 
  Burger full o cheese
  OPTIONS: OP1, OP2, OP3, Onion, Cheese, Tomato, Bacon

• 省略描述的结果

  Cheeseburger 2.50 
   
  OPTIONS: OP1, OP2, OP3, Onion, Cheese, Tomato, Bacon

• 要求的结果

  Cheeseburger 2.50
  OPTIONS: OP1, OP2, OP3, Onion, Cheese, Tomato, Bacon

有什么建议可以让空的 span 不占用任何空间除非被填充？

Answer 1

如果要排除空的<span>所选元素中的元素，您可以使用 :not() 的组合和 :empty 伪类来实现这一点。

类似于:

#menuOutput .description:not(:empty) { /* styles goes here... */ } 

例如:

.description:not(:empty), .extras {
    background-color: gold;
    min-height: 20px;
}

EXAMPLE HERE .

值得注意的是 :not()和 :empty伪类 are supported in IE9+ .