CSSで文字列の末尾を「・・・」(3点リーダー)で省略する方法

CSSで文字列の末尾を「・・・」(3点リーダー)で省略する方法

こんにちは。

ゆうや(@yuyaphotograph)です!

本記事では、CSSで文字列の末尾を「・・・」で省略する方法をご紹介します。

FirefoxやIEなど一部ブラウザでは対応されていないTipsですが知っておいて損はないでしょう笑

それでは参ります!

CSSで文字列の末尾を「・・・」で省略してみよう!

完成イメージ

今回実装する文字列末尾省略のイメージを共有します。

こんな感じです(^o^)

↓↓↓

CSSで文字列の末尾を3点リーダーで省略する方法のサンプル

上が3行で省略サンプル。下が2行で省略サンプル。

CSSで文字列末尾を省略するポイント

指定の高さを超えた長過ぎる文字列を「・・・」で省略するポイントはまず、以下を指定して「何行まで表示するか」を決めることです!

↓↓↓

index.css
display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;

「-webkit-line-clamp: 何行まで表示するか」

2行で省略したい場合は、「-webkit-line-clamp: 2」と書けばオッケーです(^o^)

MEMO
ちなみにclampは「クランプ」と読みます!

お次に、要素の範囲内に収まりきらないはみ出たテキストを非表示にするためoverflow:hiddenなどを指定します。

↓↓↓

index.css
overflow: hidden;
 width: 100%;

サンプルコード

さて、それでは実際にCSSで文字列の末尾を「・・・」で省略したサンプルコードを見てみましょう!

↓↓↓

See the Pen
クランプ文字
by 石森裕也 (@yuyaphotograph)
on CodePen.

文字列省略の記述だけを書いたクラスを用意しておけばそれを適用させたい要素に付与するだけで省略機能を実装できるので便利ですね!

参考記事

参考 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろPSYENCE:MEDIA

まとめ

以上、CSSで文字列の末尾を「・・・」(3点リーダー)で省略する方法をご紹介しました。

クランプ機能、超便利だから早く全ブラウザ対応してほしいな笑

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