最近よく使う overflow について、まとめてみました。

floatの対策に、overflow: auto;(hidden) floatしたときに、要素が浮いて親の高さ小さくなってしまう対策で、親にclearfixの代わりに使えます。

hogehoge

hogehoge
#parent {
    overflow: auto;
}
#child {
    float: left;
}

overflow: hidden でもいいのですが、はみでる要素が消えてしまう場合があるので auto がよさげ 同時に

 #parent {
     overflow: auto;
     height: 100%;
     clear: both;
 }

するとさらにいいのかも? overflow: auto で親の高さが復活する理由として知恵袋に乗っていました。

ボックスの高さは、中身から計算されます。 ところが、浮動化したボックスは、親ボックスの中身とは見なされません。だからその分、親ボックスがつぶれたようになります。 しかしながら、親ボックスの overflow が visible 以外の値であれば、その中にある浮動化ボックスも高さ計算に加える、というルールになっています(これは CSS 2.1 からのルールです)。親ボックスがスクロール領域を持つときに、中にある浮動化ボックスを無視してしまうと、かえって不自然になるからです。その結果、親ボックスは中身に浮動化ボックスがあってもつぶれません。

なぜoverflow:hiddenでfloatのレイアウト崩れが解消できるんですか? やりかたは分…

ブロック要素をはみでる文字をoverflowで省略する。 overflowよりも、

white-space: nowrap;
text-overflow: ellipsis;

の2つがみそです。

width: 450px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

タイル指定のポイント
・表示領域を指定(width: 450px;)
・改行禁止(white-space: nowrap;)
・表示領域外非表示(overflow: hidden;)
・末尾「…」表示(text-overflow: ellipsis;)
・WebKit対応(-webkit-text-overflow: ellipsis;)
・Opera対応(-o-text-overflow: ellipsis;)

●省略符号「…」を表示しないとき
text-overflow: clip;

文字数制限をしないでCSSだけで「…」を表示する