如何忽略空跨度

我有一個菜單的元素列表。這包含一個項目名稱，價格，描述和額外的列表。如果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

如何忽略空跨度

回答

相關問題