CSSだけで文末を3点リーダーで省略表示させる

投稿日：
更新日:

-webkit-line-clampとは

-webkit-line-clampはテキストを指定した行数で省略することができるプロパティです。

line-clampプロパティ自体はCSS Overflow Module Level 3に含まれており、Editors Draft(草案)である為、完全にはサポートされていません。

1行のテキストに3点リーダーを表示させる

1行のテキストに3点リーダーを表示させる場合は、-webkit-line-clampを使わなくても対応可能です。

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

2行目以降に3点リーダーを表示させる

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

参考・引用