やっほー
【CSS】長い文字列を3点リーダ表記にする方法!

【CSS】長い文字列を3点リーダ表記にする方法!

フロントエンド開発においてレイアウト崩れは世の常ですね

よくあるのが、最大文字列をDBに入れた時にフロントでどう表示されるのか?

まあ、大概レイアウトが崩れて死にます。

ただ、CSSだけで長い文字列を3点リーダ表記にするのは意外と簡単です。

てことで今回は、CSSだけで3点リーダ表記にする方法を解説します

CSSだけで3点リーダ表記にする方法

早速ですが、以下のCSSを適用するだけで3点リーダ表記になります。

以上!!

CSSで3点リーダ表記にすることによって、端末の幅に合わせていい感じに表示してくれます。

実際の表示はこんなかんじ

3点リーダ表記

こんなかんじで文末が3点リーダになってますね。素晴らしき。

おすすめ書籍

僕がCSSの勉強で読んだ本です。おすすめ!

まとめ

どうやら「text-overflow: ellipsis;」だけを指定しても3点リーダにはならないので、ちゃんと上記の3つを指定してあげる必要があります。

てことでさいなら。

【CSS】長い文字列を3点リーダ表記にする方法!
フォローしてもらえると泣いて喜びます