隐藏要素，即溢出宽度固定元件

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/