テキストの省略表示

長いテキストを省略表示するCSSテクニックを紹介します。カード内のタイトルや説明文など、限られたスペースにテキストを収めたい場面で役立ちます。

1行省略

テキストを1行に収め、収まりきらない部分を「…」で省略します。

.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

各プロパティの役割は以下のとおりです。

white-space: nowrap - テキストを折り返さず1行に強制する
overflow: hidden - はみ出した部分を非表示にする
text-overflow: ellipsis - 省略部分に「…」を表示する

この3つのプロパティはセットで使用します。

↓ Demo Preview

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

複数行省略（line-clamp）

指定した行数でテキストを省略します。以下は3行で省略する例です。

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

各プロパティの役割は以下のとおりです。

display: -webkit-box - 複数行省略に必要な特殊なボックスを作成する
-webkit-line-clamp: 3 - 表示する最大行数を指定する
-webkit-box-orient: vertical - ボックスの方向を縦にする
overflow: hidden - はみ出した部分を非表示にする

これらのプロパティはセットで使用します。-webkit-line-clamp はすべてのモダンブラウザでサポートされています。

↓ PCでご覧の方はリサイズしてご確認ください。

また、複数行の省略を行う際、Safariで無駄に余白が生じるケースがあるようです。
この場合は親要素に flex を指定すると解決するという記事がありましたので、そちらも紹介しておきます。