タイトルなどでテキストの量が多す…

「text-overflow:ellipsis;」の使い方

サイト制作者はどのようにサイトが更新されていくかをある程度想定して作っておかないといけません。

なんとなく記事のタイトルの長さがバラバラで、一覧としての視認性もイマイチのこんな並び方。
そこで結構前から使えてるのに、いまいち日の目を見ない「text-overflow:ellipsis;」を、記事のタイトル部分に使っている（想定の）aタグに使ってみましょう。
CSS先輩の登場です。

a {
	width:400px;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

わかる人にはわかる、aタグに押し込められたテキストの苦悩…（笑）

「おい、テキスト。とりあえずお前の入ってるaタグは400ピクセルのブロック要素にするわ。 それで折り返しとか許さんぞ。まっすぐのままや。はみ出るやつは消す！でもお情けで『…』だけは付けといたるわ！」
とCSS先輩は言っています。テキスト涙目。

で、お情けで付けてくれた『…』の処理が「text-overflow:ellipsis;」です。
「ellipsis」というのは英語で「省略」とかいう意味です。テキストさんCSS先輩に消されるわけです。怖いです。

そして出来上がった一覧がこちらになります。

CSS先輩ハンパないす。
全部の記事のタイトルが1行で表示されてます。おかげで隠れて見えなかった別の記事も並ぶようになりました。
そんな先輩の「text-overflow:ellipsis;」でした。結構便利。

「text-overflow:ellipsis;」で『…』を出すには下のようなルールがあります。
・ブロック要素に限定
・nowrap（1行）指定する
・overflow:hidden;と一緒に使う

ちなみに1行だけじゃなくって、複数行のブロックの最後のはみ出たテキストを『…』で処理してくれるjQuery師匠もいます。適当にググってください。
※消されるテキストさんの量が多くなるほど重くなる茶目っ気アリ。