CSSを使って文字列の行数制御をしてレイアウトを保つ

 

記事一覧のカードなどで、従来は、バックエンドで文字数制限をかけて、カードのレイアウトを保っていたりしていたが、最近では、CSSで制御できるようになったよう。

 

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

 

同要素にpaddingがあると、...の後に続きの文字列が表示されてしまう。

paddingを付けたい場合には、親要素に付ける。