月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

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

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

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

 

僕のプロフィールはこちら

 

 

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

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

以上!!

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

 

 

Advertisement

 

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

3点リーダ表記

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

 

 

おすすめ書籍

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

 

 

 

まとめ

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

てことでさいなら。

Travelerを知らないの?