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

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

接頭辞のないline-clampプロパティはCSS Overflow Module Level 4⁠（新しいタブで開く）で定義されていますが、仕様がまだEditor’s Draft（草案）の段階で、主要なブラウザでは正式にはサポートされていません（2026年9月時点）。

一方、-webkit-line-clampは、互換性のためのプロパティとして同じ仕様に含まれていて、Chrome・Safari・Firefoxなどの主要なブラウザで使えます。

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

1p {2  overflow: hidden;3  text-overflow: ellipsis;4  white-space: nowrap;5}

n行目の末尾に3点リーダーを表示させる場合は、-webkit-line-clamp: n;と指定します。ただし、この指定だけでは機能せず、下記のようにdisplay: -webkit-box;・-webkit-box-orient: vertical;・overflow: hidden;と組み合わせる必要があります。

1p {2  overflow: hidden;3  display: -webkit-box;4  -webkit-box-orient: vertical;5  -webkit-line-clamp: 3;6}

• CSS Overflow Module Level 4⁠（新しいタブで開く）
• CSS line-clamp | Can I use... Support tables for HTML5, CSS3, etc⁠（新しいタブで開く）
• line-clamp - CSS | MDN⁠（新しいタブで開く）