文章の末尾を三点リーダーで端折る。
レスポンシブな昨今、どんなに文字制限しても1行あたりの文字数ってやつは言うことを聞いてくれません。そんな時に重宝する、文章の末尾を「…」で端折る方法。
文章の末尾を端折りたい
流動的に変化する1行あたりの文字数とは裏腹に、揃って欲しい行数。タイトルは一行に、紹介文は3行くらいに揃えたいと思います。
紹介文を端折る
紹介文をを3行までに制限して、末尾に「…（三点リーダー）」を付けて端折ります。
基本的な書き方は以下の通り。古いフレキシブルボックスの機能を使います。
.summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}-webkit-line-clampプロパティが、要素内の文章を指定した行数に制限するためのプロパティ。
ただし、display: -webkit-boxと、-webkit-box-orient: verticalの両方が指定されていないと無効になっちゃうので、よっつでひとつの指定になります。
上のサンプルからoverflowプロパティのみ外すと「…」以降の文字がハミ出しちゃいます。
端折り方は「…」一択。ただし、font-familyプロパティの先頭に欧文フォントを指定している場合は「...」表記になります。
displayプロパティの-webkit-boxという値は、flex（フレックスボックス）の前身となる書き方で、今はもうW3Cの仕様からはなくなっています。line-clampもbox-orientも、この古いフレックスボックスと一緒に使われるプロパティですが、-webkit-line-clampは、現在はレガシーサポート用に標準化されたため、今後も使える見込み。-webkit-line-clampも今のところ、どのブラウザも-webkit-プレフィックス付きでサポートしています。（2024.2現在）
タイトルも端折る
紹介文の高さが揃っても、タイトルが揃ってないと、結局ズレちゃうので、タイトルも端折ります。
内容的に端折っちゃいけないタイプのコンテンツだけれど、ここでは揃わせ重視で、1行めの末尾を「…」で端折ってしまいます。1行の場合は以下の通り。
.name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}white-spaceプロパティで改行させないようにして、overflowプロパティで要素からのハミ出した部分を切り取って、text-overflowプロパティの値にellipsisを指定すると、テキストが切り取られる直前に「…」を表示するようになります。
こちらも、どれかひとつでも欠けると無効なので、みっつでひとつの指定になります。