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で対応しました。
せっかく色々試行錯誤したので記録がてら残しておきます。
