長い文章を「…」で省略してくれる「text-overflow: ellipsis;」と復数行の場合の対応

こんにちは社員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での対応がスマートだと思います。

参考になれば幸いです。