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

複数行で「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

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ
CSSを書くのって大変ですよね。親要素が何処で・・・って管理が凄く面倒だと思います。
そういう場合にこの書籍がオススメです。
Sassというのはcssのメタ言語(拡張言語)で、ネストした書き方や、
変数、mixinという、プログラミング言語で言うメソッドのようなものを使うことも可能です。
この書籍は、そのSassの使い方について書かれています。
とても分厚いですが、難しいことは考えずにネストの項目だけ読めば実践では十分です。
興味があれば他の項目も是非読んでみてください。