テキストの省略表示

長いテキストを省略表示するCSSテクニックを紹介します。

1行省略

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

複数行省略（line-clamp）

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

ユーティリティクラス化

.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; }

-webkit-line-clamp は現在すべてのモダンブラウザでサポートされています。