CSS
長い文章を「…」で省略してくれる「text-overflow: ellipsis;」と復数行の場合の対応
2020年03月22日 23:56
こんにちは社員Kです。
本日は、長いテキストを「…」で省略してくれる「text-overflow: ellipsis;」の使い方とテキストを2行以上表示しつつ省略したい場合の対応方法をご紹介します。
text-overflow: ellipsisで長いテキストを省略できる
text-overflow: ellipsisを使うと、ボックスから文字があふれる場合の省略方法を指定できます。
同時に「overflow: hidden;」「white-space: nowrap;」の指定も行います。
テキストを1行だけ表示してあふれた部分を「…」で省略するシンプルな使い方です。
.txt_ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; }
See the Pen
長い文章を「…」で省略してくれる「text-overflow: ellipsis;」と復数段の場合の対応 by y.kawabata (@ykawabata)
on CodePen.
複数行のテキストを表示させたうえで省略も行いたい場合
次に、複数行のテキストを表示させたい場合の対応方法をご紹介します。
line-height とmax-heigh をem で指定することで任意の行数のボックスの高さを指定できます。
.title{ font-size: 10px; } .ellipsis{ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.4em; line-height: 1.6em; } .ellipsis.line1{ max-height: 1.6em; -webkit-line-clamp: 1; } .ellipsis.line2{ max-height: 3.2em; -webkit-line-clamp: 2; } .ellipsis.line3{ max-height: 4.8em; -webkit-line-clamp: 3; }
See the Pen
長い文章を「…」で省略してくれる「text-overflow: ellipsis;」と復数段の場合の対応 by y.kawabata (@ykawabata)
on CodePen.
YouTubeのようなサムネイルとタイトルをリスト表示するようなレイアウトのときに便利だと思います。
WordPressなどでタイトルを省略したい場合はPHPの関数で「mb_strwidth」を使ってもテキストを省略することができますが、
そちらの場合は行数ではなく文字数での切り取りになるため、意図しない折り返しやレスポンシブレイアウトにおいては不都合が多いため、
CSSでの対応がスマートだと思います。
参考になれば幸いです。
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!