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

投稿日：2023.12.24

更新日：2024.11.05

`-webkit-line-clamp`とは

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

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

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

CSS

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

n行目の末尾に3点リーダーを表示させる場合は、-webkit-line-clamp: n;と指定します。ただし、現在この指定だけでは機能せず、下記の記述にする必要があります。

CSS

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