CSS：文字のオーバーフローを「…」で省略

行末を省略してもいいから固定幅で1行で表示させたい

どうしても1行で表示させたい

とか

トップページに表示するトピックスのタイトルのような、長すぎる場合は省略しても問題がない表示などに使えます。

.hoge {
width: 400px;
overflow: hidden;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
}

やっている事は

width: 文字を表示させる領域の横幅を設定
overflow: オーバーフローしたら非表示にする
line-height: 次の行に逃げないように行高さを2より小さく設定
white-space: 連続する半角スペース・タブ・改行を1つの半角スペースとし、改行をさせない
text-overflow: 文字がオーバーフローしたら「…」で置き換える