CSSで長い文字列を三点リーダー（…）などで省略する方法

CSSで長い文字列を三点リーダー（…）などで省略する方法をご紹介します。

1行の場合

1行でいいのであればこちらの方法が一番簡単です。 ポイントはこちらの3点セット。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

IEを含む各ブラウザに対応しているのが嬉しいですね。

See the Pen ellipsis-single by OKD (@OKD) on CodePen.

複数行の場合

3点リーダーではなく、フェードアウトさせる方法

後述いたしますが、3点リーダーにこだわりがなければこちらのようにぼかしてしまうのが最善かなと思います。 書き方は色々あるのですが一例として。

See the Pen ellipsis-multiple by OKD (@OKD) on CodePen.

3点リーダーで対応する方法

CSSかつ3点リーダーを使うとなるとこの方法ですかね。 ただ内容によっては３点リーダーが文字に半分だけかかってしまったり、見た目がスマートじゃないのが難点です。 なので個人的には先ほどの方法がおすすめです。

See the Pen ellipsis-multiple-2 by OKD (@OKD) on CodePen.

その他jsで対応する方法もありますが、SalesforceのAuraコンポーネントと組み合わせた際、うまく機能しなかったのでCSSで対応しました。 せっかく色々試行錯誤したので記録がてら残しておきます。 参考：jQuery で複数行対応の自動省略三点リーダー「...」付与修正版