Question

我有一个菜单元素列表。这包含项目名称，价格，描述和附加列表。如果遗漏了描述，则它包含的span仍然会填满空格，即使它是空的。描述和附加CSS是相同的类，但如果需要可以更改。这被用在bootstrap 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不占用任何空格？

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+。

如何忽略空跨度

1 个答案: