如何忽略空跨度答案

【问题标题】：How to ignore an empty span如何忽略空跨度
【发布时间】：2014-03-14 07:05:42
【问题描述】：

我有一个菜单元素列表。这包含一个项目名称、价格、描述和附加列表。如果一个描述被遗漏了，span 它包含的仍然会填满空间，即使它是空的。描述和附加 CSS 是同一个类，但可以根据需要进行更改。这是在引导 jumbotron 中使用的。

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

结果

当前结果

芝士汉堡 2.50
汉堡全奶酪
选项：OP1、OP2、OP3、洋葱、奶酪、番茄、培根

省略说明的结果

芝士汉堡 2.50

选项：OP1、OP2、OP3、洋葱、奶酪、番茄、培根

要求的结果

芝士汉堡 2.50
选项：OP1、OP2、OP3、洋葱、奶酪、番茄、培根

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

【问题讨论】：

你能设置一个 jsfiddle 演示吗？您是否更改了span 元素的默认显示类型？
注意 'empty' 和 ' '是两个不同的东西。跨度是空的，还是有不间断的空格字符？

标签： css css-selectors

【解决方案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+。

【讨论】：