[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;
}

上記の指定で、「・・・」で省略されるようになります。

（実行例）

ブラウザのサポート状況

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

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

参考資料

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

最後に

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

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

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