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

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

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

その他jsで対応する方法もありますが、SalesforceのAuraコンポーネントと組み合わせた際、うまく機能しなかったのでCSSで対応しました。
せっかく色々試行錯誤したので記録がてら残しておきます。

参考:jQuery で複数行対応の自動省略三点リーダー「…」付与修正版

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM