css - オーバーフロー-隠された左の要素

Question

親divの列として一連のdivが非表示にオーバーフローするように設定されていますが、オーバーフローではなく、コンテナの右側に到達すると列が折り返されます。

これはコードの基本バージョンです。

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

Answer 1

float:left; の代わりに inline-bock を使用する必要があります。

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>​

Answer 2

試す

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

これにより、オーバーフローが隠され、テキストが強制的に折り返されず、すべてが 1 行に収まります。

新しいブラウザーの場合、CSS は素敵なタッチを追加するellipsisためのプロパティをサポートしています。text-overflow