溢出 - 隐藏和浮动的左侧元素答案

【问题标题】：Overflow - hidden and floated left elements溢出 - 隐藏和浮动的左侧元素
【发布时间】：2012-05-27 17:09:15
【问题描述】：

我有一系列 div 作为父 div 中的列，它设置为溢出隐藏，但是当到达容器的右侧而不是溢出时，这些列会换行。

这是代码的基本版本。

.column{
width:200px;
float:left;
}
<div style="overflow:hidden">
<div class="column"></div>
<div class="column"></div>
</div>

【问题讨论】：

How to avoid wrapping in CSS float的可能重复

标签： css

【解决方案1】：

你应该使用 inline-bock 而不是 float:left;

http://jsfiddle.net/RgJk9/1/

.container { width: 300px; overflow: scroll; white-space: nowrap; }

.column{
  background-color: red;
  width:200px;
  height: 200px;
  display: inline-block;
}

使用 HTML：

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

【讨论】：

这似乎有效，虽然我需要空格：nowrap;在容器上也是如此。
您实际上只需要在容器上使用它，列不应该需要它，除非它们内部存在包装问题。

【解决方案2】：

试试

div.column {
    white-space: nowrap;
    overflow-x: hidden;
    width: 200px;
}

这将隐藏任何溢出，并强制文本不换行，将其全部放在一行上。

对于较新的浏览器，CSS 支持 ellipsis 属性为 text-overflow 添加漂亮的触感。

【讨论】：