複数行で「text-overflow: ellipsis;」みたいなことをする方法色々。

text-overflow: ellipsis;
とは、指定した領域をはみ出した文章の末尾を「…」に変えてくれるもの。
そのまま使うと複数行の文章には効かなくなってしまうので、
いろんな方法で複数行に効かせてみる。
今回はcssだけで行う。

そもそもの指定方法となぜ複数行に効かないのか

実際の指定はこのように行う

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

実際にやってみると、以下のようになる。

次に複数行でテストしてみる　もととなる文章は以下。

これにelipsisを効かせてみる。

なぜこんな事になるかというと、
詳細は以下をちゃんと読んだ方がいいのだが、
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

とあるように、
要するに横方向にはみ出した要素にしか効いてくれないのだ。
white-space: nowrap;を使用しているのもこの辺が絡んでくる。

複数行でも省略して見せる方法

ここからは、複数行でも省略する方法を解説していく。

ほぼ全ブラウザ対応・全て文字が省略される前提だが簡単

まずはcssだけで行う方法から。
まずは、疑似要素を上に重ねて最後の文字に重ねて隠す方法から。

See the Pen elipsis by blue (@aoiBlue) on CodePen.0

まず表示領域を設定して、position: relativeを設定。
疑似要素にposition: absoluteを設定し、
「…」を表示したい位置に疑似要素を移動させる。
背景を同じ色にして後ろの文字を隠し、
省略しているかのように見せかける。
ただ、これの問題として、文字サイズによっては隠したい文字が見切れていたり、
省略されるほど文字数がないコンテンツだと右下に…が表示されている謎の領域となってしまう。

レスポンシブ対応？・省略されないパターン対応・やや難しい

一番開発者が求めている形はおそらくこれ。

• レスポンシブ対応？
• 省略されないパターンでは…を出さない

という二点に対応していてかつCSSだけで実装可能である。
ただし、やや難しいことをしている。
実装したものが以下になる。

See the Pen elipsis-css-3 by blue (@aoiBlue) on CodePen.0

「…」の出し方自体は先ほどのやり方と同じ。
違うのは、…を隠すためにさらに疑似要素を使っていることだ。
after要素でコンテンツと同じサイズ・同背景色の要素を作成しておいて、
文章の終わりに重ねるという手法を使っている。
デベロッパーツールで見てみるとわかりやすい。

※ 2018/08/21追記
英語などの場合、上手く文字を隠せないパターンがあることが分かった。
そういう場合は、以下のオプションを加えることで、綺麗にすることが可能になる。

text-align: justify;

日本語には影響は出ないので、多言語サイトなどで使用することができる。

See the Pen elipsis-css-4 by blue (@aoiBlue) on CodePen.0

一部ブラウザのみかつ非推奨

さらに楽できる方法があるが、
いわゆるベンダプレフィックスというやつなので非推奨。
こんな感じで使う。

See the Pen elipsis-css-2 by blue (@aoiBlue) on CodePen.0

display: -webkit-box; //フレキシブルボックスにする。
-webkit-box-orient: vertical; //vertical(垂直)にボックスを並べる。
-webkit-line-clamp: 4; //何行目を省略するか指定

この三行で使えてしまう。
少し注意なのが、省略行以降の文章も表示してしまい、overflow:hidden;も効かないので、
外側の要素でサイズ指定とoverflow:hidden;してあげる必要がある。

chrome, safariで使えてしまうので、
暫定対応として入れるのはありかもしれない。
（jQueryで対応するのがやや大変なので、その繋ぎとして）

非推奨の詳細はこちらのサイトが非常にわかりやすかった。
http://nanto.asablo.jp/blog/2016/12/01/8264908/tb