line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
Post on:2019年8月30日
sponsors
テキストを省略表示する際に、文末を3点リーダーにする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プロパティの仕様は、下記の通りです。
|
1 2 3 |
.module { line-clamp: [none | <integer>]; } |
- none: 行数を定義しない場合、省略は行われません。
- <integer>: 行数を定義した場合、最後の行の文末に省略記号を表示します。
省略記号はUnicode文字(U+2026)としてレンダリングされるべきですが、使用しているユーザエージェントの言語と書き込みモードに基づいて同等の省略記号に置き換えることができます。
text-overflowでこれを実現できますか？
よくある質問です。
text-overflowには実際に、テキストを取り除くellipsisという値があります。
|
1 2 3 4 5 6 7 |
.truncate { text-overflow: ellipsis; /* 機能させるためには下記も必要 */ overflow: hidden; white-space: nowrap; } |
この実装で、下記のように表示されます。
See the Pen
text-overflow by Geoff Graham (@geoffgraham)
on CodePen.
いい感じですね。しかし、1行しか対応していません。
では、1行目に省略記号を使うのではなく、3行目に省略記号を使いたいとしたらどうしますか？
そこで登場するのがline-clampプロパティです。
使用するには、line-clampプロパティ以外に3つのプロパティも加えることに注意してください。
|
1 2 3 4 5 6 |
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } |
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+でサポートされています。
リソース
sponsors
