JavaScript不要！？cssのline-clampでテキストを省略表示！

トラストバンク開発部・フロントエンドチームの君田（きみた）です。

本日はテキストの省略表示に使用することができるcssプロパティ「line-clamp」について書いていきます。
最近業務で業務で使用する機会があり、大変便利で感動を覚えたので是非記事にしようと思いました。

これまでのテキスト省略方法

トラストバンクではこれまでテキスト省略をする場合には、JavaScriptを使用して実現していました。主に以下の様なコードを使用していると思います。省略対象の文字数が50を超えた場合、50文字以降は省略し、51文字目に「...」を加えて表示するサンプルです。

    const omitTexts = document.getElementsById('text-to-omit');
    const MAX_CHAR = 50;
    const text = omitText.textContent;
    if (text.length > MAX_CHAR) {
      omitText.textContent = `${text.slice(0, MAX_CHAR)}...`;
    }

これでも十分にテキストの省略表示を実現できていますが、例えば、、、、
①「指定要素の高さと横幅いっぱいまでテキストを表示させたいけど、何文字まで表示せれば良いかわからない」

② 「PCとスマートフォンなどデバイスごとに省略する文字数を変更したい」

などの要件が飛んできた場合、JavaScriptで行うとなると少し作業が発生します。

①の場合は何文字になるかを調整しながら、文字数をカウントしていかなければなりません。 ②の場合は上記のサンプルコードにPCかスマートフォンかを判定する処理を追加で記載しなければなりません。

そんな作業を省いて、良い感じにテキストを省略してくれるのが今回紹介する「line-clamp」です！

JavaScriptで省略表示をしていた背景

line-clampはIE11でサポートされておらず、今まであまり日の目を浴びることがなかった様に思えます。（使いたかったけど使えなかった）このプロパティがちゃんと使用できるようになったのは2022年6月16日にIE11のサポートが終了したためです。

caniuse.com

line-clampを使用した省略表示

本題のline-clampを使用した省略表示をしていきましょう！

    <h1 class="omit">ここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトルここがタイトル</h1>

.omit {
  width: 70%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

結果

文字数を指定せずとも、横幅に合わせて省略することができました！

内容を確認していきましょう！
まず、表示可能な横幅を指定します。
その次に指定しているプロパティ「display」「-webkit-box-orient」ですが、この値は省略表示する場合は固定値だと思っていただいて問題ないと思います。
MDNに以下の記載があります。

display プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ box-orient プロパティに vertical が設定されている組み合わせのときのみ使用できます。 https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

「-webkit-line-clamp」「overflow」がテキスト省略文字数の正体です。
「-webkit-line-clamp」で省略テキストの表示可能行数を指定します。上記の場合3なので3行まで表示します。
「overflow」にhiddenを指定することで、指定した表示可能行数を超えた場合のテキストは非表示になります。
「overflow」に関しては以下の記載があります。