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

2019/12/30

こんにちは。

ゆうや（@yuyaphotograph）です！

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

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

それでは参ります！

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

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

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

↓↓↓

上が３行で省略サンプル。下が２行で省略サンプル。

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

↓↓↓

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で文字列の末尾を「・・・」で省略したサンプルコードを見てみましょう！

↓↓↓

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

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

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

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