隐藏元素，溢出固定宽度的元素答案

【问题标题】：Hide elements, that overflows a fixed width element隐藏元素，溢出固定宽度的元素
【发布时间】：2011-06-21 08:24:25
【问题描述】：

考虑以下...

这是三个元素，仅显示了一个元素（最左侧）。这可能吗？我已经尝试过类似的东西......

<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 兼容。

【问题讨论】：

height: auto 不会自动增加高度（我相信默认）？
我很困惑 - 内部 div 正在扩展外部容器，但您不希望它们这样做吗？应该注意的是，overflow: hidden 是您如何扩展包含 div 以包含内部浮动 div。
roosteronacid.com/viewport.png 404s 请在更稳定的地方重新上传

标签： html css

【解决方案1】：

见：http://jsfiddle.net/9Nh7t/

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

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

【讨论】：

哇！那太快了！我想用缩进和空格格式化我的源代码。有什么方法可以删除元素之间的空白（渲染），而不必截断我的源代码？
当然：stackoverflow.com/questions/6350218/…