2012/10/29更新

[CSS] 指定横幅を超えたら、テキストを「・・・」で省略するCSSの書き方

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
こんなCSSあるんだーとビックリしたものの一つで、 指定よ小幅を超えたら文字を「・・・」で省略することができるCSSを紹介したいと思います(*´∇`*)

画像



横幅を超えたら文字を「・・・」で省略するCSS

これを実現するために、「text-overflow」というCSSを利用します。
.userName {text-overflow: ellipsis;}

ただ、上記だけでは省略されないようで、改行方法やoverflowや横幅の指定も一緒にする必要があるようです。
.userName {
  width: 115px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
上記の指定で、「・・・」で省略されるようになります。

(実行例)
ユーザー名ゆーざーめいユーザーメイUserNameと長い名前は省略される



ブラウザのサポート状況

text-overflowは、以下のように多くのブラウザで利用できるようです。

参照元:http://caniuse.com/#feat=text-overflow



参考資料

以下のページで詳しく紹介されています。詳細はこちらをご覧下さい。
https://developer.mozilla.org/en-US/docs/CSS/text-overflow



最後に

こーゆう便利なCSSって知ってるとコーディングが早くなっていいですね。
指定する際の文字「・・・」を指定する事も出来るようですが、今は上手く動かないブラウザが多いようです。。

「○文字以上は省略」という文字数での制御は難しそう(等幅フォントを使えばできるかも。。)ですが、 「指定範囲を超える場合は省略する」という要件なら使うことが出来そうです。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。