-webkit-line-clamp

Module Reference

CSS Overflow

Feature Reference

-webkit-line-clamp

What is this?

テキストを複数行に渡って表示し、指定した行数で収まらない部分は省略する。

Usage

3行表示

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

Bad Practices

上下のpaddingがあると綺麗に見えない

-webkit-line-clampを指定するとき、上下にpaddingがあると、省略行の次の行が見えてしまう。

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

この場合、少なくともpadding-bottom: 0;が必要。

.has-padding-clamp {
  padding: 1rem;
  padding-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

-webkit-群の組み合わせでしか機能しない

-webkit-boxの正体はflexプロパティのベンダープレフィックス。

flexが草案時代にWebKitでflexを利用するときに使われていたプロパティだが、 -webkit-boxの代わりにflexを指定すると-webkit-line-clampは機能しない。

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