フロントエンド開発においてレイアウト崩れは世の常ですね。
よくあるのが、最大文字列をDBに入れた時にフロントでどう表示されるのか？
まあ、大概レイアウトが崩れて死にます。
ただ、CSSだけで長い文字列を3点リーダ表記にするのは意外と簡単です。
てことで今回は、CSSだけで3点リーダ表記にする方法を解説します。
CSSだけで3点リーダ表記にする方法
早速ですが、以下のCSSを適用するだけで3点リーダ表記になります。
|
1 2 3 4 5 |
.sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
以上！！
CSSで3点リーダ表記にすることによって、端末の幅に合わせていい感じに表示してくれます。
実際の表示はこんなかんじ
こんなかんじで文末が3点リーダになってますね。素晴らしき。
おすすめ書籍
僕がCSSの勉強で読んだ本です。おすすめ！
まとめ
どうやら「text-overflow: ellipsis;」だけを指定しても3点リーダにはならないので、ちゃんと上記の3つを指定してあげる必要があります。
てことでさいなら。