意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法

テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。

サイトのキャプチャ

line-clamp


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

line-clampプロパティとは

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

2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があると指摘されています。
参考: CSS Overflow Module Level 3

max-linesの機能(切り捨てる前に行数を設定)は既にline-clampにベイク処理されており、さらに抽象化する必要がないため、max-linesがどのように削除されるかを簡単に確認できます。
話が少し脱線しました。line-clampプロパティの仕様と使い方を見てましょう。

line-clampプロパティの仕様

line-clampプロパティの仕様は、下記の通りです。

  • none: 行数を定義しない場合、省略は行われません。
  • <integer>: 行数を定義した場合、最後の行の文末に省略記号を表示します。

省略記号はUnicode文字(U+2026)としてレンダリングされるべきですが、使用しているユーザエージェントの言語と書き込みモードに基づいて同等の省略記号に置き換えることができます。

text-overflowでこれを実現できますか?

よくある質問です。
text-overflowには実際に、テキストを取り除くellipsisという値があります。

この実装で、下記のように表示されます。

See the Pen
text-overflow
by Geoff Graham (@geoffgraham)
on CodePen.

いい感じですね。しかし、1行しか対応していません。
では、1行目に省略記号を使うのではなく、3行目に省略記号を使いたいとしたらどうしますか?

そこで登場するのがline-clampプロパティです。
使用するには、line-clampプロパティ以外に3つのプロパティも加えることに注意してください。

Firefoxもこの-webkit-プレフィックスの記述をサポートしています。

See the Pen
line-clamp (-webkit)
by Geoff Graham (@geoffgraham)
on CodePen.

実装の注意点

現時点では、ブラウザのサポートです。line-clampプロパティはCSS Overflow Module Level 3にあり、Editors Draftで、完全にはサポートされていません。

しかし、主要なすべてのブラウザで-webkit-プレフィックスを使用して、行を指定して文末を省略記号にすることができます。

もし、古いブラウザでも使用したい場合は、Clamp.jsを利用することもできます。下記は、Clamp.jsで実装したデモです。

See the Pen
line-clamp (clamp.js)
by Geoff Graham (@geoffgraham)
on CodePen.

line-clampプロパティのサポートブラウザ

2019年現在、line-clampプロパティは主要なすべてのブラウザでサポートされています。IEはサポート外ですが、Edge 17+でサポートされています。

サイトのキャプチャ

line-clampのサポートブラウザ

リソース

sponsors

top of page

©2019 coliss