テキスト末尾を３点リーダーにする方法

Yuichi Kanno

February 16, 2022

久しぶりに実装した３点リーダーについてまとめます。
そこまで難易度は高くないものの、実装する間隔が空くと毎回調べている気がしたので、ここらで一度記事として残そうと思いました。

まず３点リーダーとはなんぞやということですが、
文章の末尾を省略するときにある「...」という点々のことです。

3つの点で表現することが多いので３点リーダーと呼ばれています。

省略したいテキストの要素にスタイルを付与してあげます。

<div class="text">あいうえおかきくけこさしすせそ</div>

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

３点リーダー自体（... の部分）は text-overflowプロパティにより実現されます。
それぞれのプロパティの詳細な使用は下記を参照してください。

またdisplay: flex; を指定している場合、text-overflow: ellipsis; は効きません。
解決策としては「flexの子要素をdivタグなどでwrapする」などがあります。
（詳しくはこちらの記事を参照）

1行のテキストの時は上記対応で良いのですが、複数行のテキストの最終行の末尾を省略したい時もありますよね。

その場合は下記のように実装します。

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

-webkit-line-clampプロパティにより指定した行数のテキスト末尾を３点リーダー表示します。上記の場合は3行目を３点リーダー表示します。
※IEには対応していません。

簡単でしたね！！

次回以降はすぐ実装出来るようにしておきたいです。