如何忽略空跨度

我有一个菜单的元素列表。这包含一个项目名称，价格，描述和额外的列表。如果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; 
}

结果

当前结果

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不占用任何空间，除非填充？

来源

2014-03-13 maxum

你能设置一个jsfiddle演示吗？你是否改变了'span'元素的默认显示类型？ –

请注意'空'和' '是两个不同的东西。跨度是空的，还是具有非破坏性空间特征？ –

如果要从所选元素中排除空的<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+。

来源

2014-03-13 22:45:53

如何忽略空跨度

回答

相关问题