文字制限するcss

CSSのみで、文字制限する方法

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

厳密には文字制限ではなく「行制限」ですね。

上記のコードの場合、2行を超える長いタイトルの場合 → 2行まで表示し、2行目の末尾に「…」をつけてくれます。

カード実装などで、表示を綺麗に揃えたい時に便利です！