記事一覧などの文章が動的に表示される個所は、作成した記事によって文章量は変わってきます。
これをそのままの状態にしてしまうと、記事のボックスの大きさがそれぞれ変わってしまいガタガタになってしまいます。
高佐をそろえてあげるために、一定の範囲でテキストを省略してあげる必要があります。
PHPの「mb_strwidth」を使って似たようなことができますが、文字数での処理となるため、等幅フォントを使用しているなどの条件がそろってない場合省略位置がバラバラになってしまい、見栄えが良くありません。（レスポンシブの時に顕著にわかる）
ということで今回はCSSのみで行う「複数行にも対応！長い文章の末尾を「…（3点リーダー）」にして省略する方法」をご紹介します。
目標物
長くなってしまったテキストを省略し、末尾を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;
/*IE対策*/
line-height: 1.5em;
max-height: 4.5em;
}
line-clampはIEに対応していないので、max-heightで対策します。
基準となるline-height、line-heightの数値 × 行数の数値をmax-heightに入れます。単位はそれぞれemを使用する。
※3点リーダーは入らないので、「どうしても3点リーダーをIEで入れたいんだー！」という方は疑似要素などを使うしかないと思います。
これで完成です！
末尾が同じ個所で省略されている状態かつ、3点リーダーに変更になっています。
See the Pen 長い文章の末尾を省略 by design-levelup (@marurain) on CodePen.
