html - 溢出的多个内联元素 :hidden (CSS)

Question

我需要多个可以隐藏和扩展的内联元素，所以我尝试将一堆 span 放入包装器 div 中，width:0; overflow:hidden，但现在跨度溢出到多行。我该如何防止这种情况？这是我的代码(我将宽度设置为 50px，以便更容易看到问题):

JSFIDDLE

HTML

<div class='wrapper'>
    <span>first span</span>
    <span>second span</span>
</div>

CSS

.wrapper {
    width:50px;
    background: lightgrey;
    overflow:hidden;
}
span {
    white-space:nowrap;
}

Answer 1

如果我理解正确，你可以添加

white-space:nowrap

到父元素 (.wrapper) 而不是 span 本身，它会解决问题。

已编辑 JSFIDDLE

http://jsfiddle.net/kdw95/2/