带溢出的多个内联元素：隐藏（CSS）

Question

我需要多个可以隐藏和扩展的内联元素，所以我尝试在width:0; overflow:hidden的包装div中放入一堆spans，但现在跨越溢出到多行。我该如何防止这种情况？这是我的代码（我的宽度为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/

Answer 2

http://jsfiddle.net/kdw95/3/

它看起来像list所以你应该使用一个列表来完成这个任务：）。