[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

  • あとで読みたい人は…

本当は炭酸が好きな、@cappeeです。

いつまで続くかわからない、意外と知らないCSSシリーズの第2弾です。

テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

表示する文字が多かった場合に省略したことを表す「…」はCSSだけでも表示できます。

システムだと文字数を指定して表示しますが、CSSでは幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

text-overflow の説明

text-overflow:  ellipsis;
テキストが表示領域をこえた場合に省略記号「…」を表示します。

text-overflow:  clip;
デフォルトの値で省略記号は表示しません。

text-overflow:ellipsis の記述例

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

Opera 9-10への対応はベンダープレフィックスが必要です。
text-overflowはIE6から独自仕様として実装されたものなのでIE6にも対応しています。
逆にFirefoxがやっと7から対応になったので今はほとんどのブラウザで問題なく使えるということですね。

text-overflow:ellipsis を使った表示

text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。

注意点

改行をしない white-space: nowrap; を記述しないといけないため、表示できるのは1行目のみとなり、1行目の最後に省略記号「…」がつきます。
複数行で使用したい場合はjavascriptを使うなど工夫がいるようです。
text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応

IEでのバグ[2013.9.20追記]

table要素の中で text-overflow: ellipsis を使うとIEでは正常に表示されないというバグがあるみたいです。
現時点で一番新しいバージョンIE10でも確認しました。
検索しても同じことを書いてある記事を探せなかったのでレアケースかもしれませんが一応メモ。

Pocket
article clipper [意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext overflow:ellipsis

3 thoughts on “[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

  1. Pingback: 保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた

  2. Pingback: テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法 | KOSAERU

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)