複数行にも対応！長い文章の末尾を「…（3点リーダー）」にして省略する方法【CSS】

記事一覧などの文章が動的に表示される個所は、作成した記事によって文章量は変わってきます。

これをそのままの状態にしてしまうと、記事のボックスの大きさがそれぞれ変わってしまいガタガタになってしまいます。

高さをそろえてあげるために、一定の範囲でテキストを省略してあげる必要があります。

PHPの「mb_strwidth」を使って似たようなことができますが、文字数での処理となるため、等幅フォントを使用しているなどの条件がそろってない場合省略位置がバラバラになってしまい、見栄えが良くありません。（レスポンシブの時に顕著にわかる）

ということで今回はCSSのみで行う「複数行にも対応！長い文章の末尾を「…（3点リーダー）」にして省略する方法」をご紹介します。

目次非表示

目標物
CSS
- テキストを1行で省略する時
- 複数行の時

目次へ

目標物

長くなってしまったテキストを省略し、末尾を3点リーダー(…)に置き換えます。

CSS

1行の時と、複数行の時の記述する内容が大きく違いますので、分けて説明します。

テキストを1行で省略する時

文字を省略したいテキストのクラスに以下のコードを記述します。

テキストを1行に表示して、はみ出た部分を隠し、最後を3点リーダーに変更しています。とてもシンプルですね。

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

複数行の時

複数行の時はline-clampプロパティを使用します。ここに入れる数値が表示される行を表しています。（3行で隠したい場合は「3」）

下記のコードの上4つはセットで入れるようにしましょう。line-clampプロパティはあくまでクランプ文字（…）を表示するためのモノ。

.text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    max-height: 4.5em; /* 念のための保険 */
}

💡 max-heightは保険として残しておくと安心

-webkit-line-clampは現在は主要ブラウザ全てで問題なく動作しますが、念のためline-heightの数値 × 行数の数値をmax-heightに指定しておくと、万が一line-clampが効かない環境でも高さだけは揃った状態を保てます(単位はどちらもemで揃えてください)。

これで完成です！

末尾が同じ個所で省略されている状態かつ、3点リーダーに変更になっています。

See the Pen 長い文章の末尾を省略 by design-levelup (@marurain) on CodePen.