WEBデザインテクニック|KLUTCHE

【CSS】エリアに入りきれないテキストを「・・・」で省略する方法

新着投稿などの本文の文頭のみを表示して続きを「・・・」で省略したい時、CSS3 の text-overflow を使うと簡単に表現できます。


PHPでサイト構築することが多いので、一定文字数以上の文章を省略したい場合は、mb_strimwidth 関数を使ったりしていましたが、text-overflow:ellipsis; を使うと、CSS オンリーではみ出した文字を自動で「・・・」で省略してくれます。

現在webkit系のsafariやchrome、operaでしか思い通りに動いてくれませんが、iPhone 用のサイト構築等では活躍してくれます。

CSS

.area {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}

HTML

<div class="area">
祇園精舎の鐘の声諸行無常の響きあり沙羅双樹の花の色盛者必衰の理をあらわす驕れる人も久しからずただ春の世の夢のごとし猛き者も遂には滅びぬ偏に風の前の塵に同じ
</div>

デモ

祇園精舎の鐘の声諸行無常の響きあり沙羅双樹の花の色盛者必衰の理をあらわす驕れる人も久しからずただ春の世の夢のごとし猛き者も遂には滅びぬ偏に風の前の塵に同じ

↑ chrome、safari、opera の最新のブラウザでご覧の方は確認できます。マウスホバーで続きの文章を表示します。

iPhone 用サイトの新着情報一覧などに使っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です