隐藏元素，它会溢出固定宽度的元素

Question

考虑以下内容......

http://roosteronacid.com/viewport.png

这里有三个元素，只显示了一个元素（最左边）。这可能吗？我已经尝试了类似的东西......

<div id="container">
    <div></div>
    <div>I overflow the container, so I should be hidden</div>
    <div>I also overflow the container, so I should be hidden</div>
</div>

#container {
    overflow: hidden;
    width: 300px;
}

#container div {
    float: left;
    width: 300px;
}

......但是如果没有指定固定的高度我就无法工作。这是我不想要的。元素的高度必须是动态的，并根据其内容增长。

注意：这必须与iOS Safari兼容。

Answer 1

请参阅： http://jsfiddle.net/9Nh7t/

• 将float: left替换为display: inline-block。
• 要防止换行，请在父元素上添加white-space: nowrap。

要摆脱“差距”（例如visible here），最简单的解决方法是从HTML中删除空格：http://jsfiddle.net/9Nh7t/2/