Lopan.jp

とりとめないメモ。
3行めの末尾を三点リーダーで端折る

レスポンシブな昨今、どんなに文字制限しても1行あたりの文字数ってやつは言うことを聞いてくれません。そんな時に重宝する、文章の末尾を「…」で端折る方法。

行数を制限する

基本的な書き方は以下の通り。古いフレキシブルボックスの機能を使います。

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

-webkit-line-clampが、要素内の文章を指定した行数に制限するためのプロパティ。
ただし、display: -webkit-boxと、-webkit-box-orient: verticalが指定されている場合のみ有効なので、みっつでひとつな指定になります。

-webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN

端折り方は「…」一択。 端折られ方は、言語ごとにバラツキがあるようですが、日本語ならまず大丈夫そう。

font-familyプロパティ先頭に欧文フォントを指定している場合「...」表記になります。上のサンプルではfont-familyNoto Sans JPを指定していますが、Chromeでは「…(和文)」表記になりますが、Firefoxでは「...(欧文)」表記になるみたいです(2020.1現在):(

CSS Line-Clamp — The Good, the Bad and the Straight-up Broken

displayプロパティ-webkit-boxという値は、flex(フレキシブルボックス)の前身となる書き方で、今はもうW3Cの仕様からはなくなっていますline-clampbox-orientも、この古いフレキシブルボックスと一緒に使われるプロパティですが、-webkit-line-clampは、現在はレガシーサポート用に標準化されたため、今後も使える見込み。
今のところ、-webkit-プレフィックス付きで、IE以外すべてのブラウザでサポートしています。(2020.1現在)

要素の高さを制限して末尾に三点リーダーを付けるだけ

上のサンプルからoverflow: hiddenのみ外すと、文章はハミ出しちゃいます。けれど、3行めの末尾に「…」が追加されて、要素自体の高さも3行に制限されているのが分かりますね:D

要素の高さは3行に制限されている

ページトップへ戻る

タイトルも端折る

抜粋文の高さが揃っても、タイトルが揃ってないと、結局ズレちゃうので、タイトルも端折ります。
タイトルは2行になることはほとんどないので、1行めの末尾を「…」で端折ってしまいます。1行ならtext-overflow: ellipsisを使った方法で大丈夫。

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

こちらも、どれかひとつでも欠けると無効なので、みっつでひとつな指定になります。

  • ※Chromeも、ellipsisは、Noto Sans JPを欧文と認識するみたいです(2020.1現在)。
  • ※上サンプルでは、text-overflowプロパティの値を、5記事めまではellipsis、6記事めに「…」を指定していますが、Chromeではtext-overflow: "…"という指定方法が効いていない様子(2020.1現在)。

抜粋文の要素の高さを揃える

抜粋文が3行に満たない時の、足りない余白を埋めるには、フレキシブルボックスレイアウトを使います。画像と文章を括っているa要素display: flexflex-direction: columnを指定して縦に並べたらば、文章の要素にだけ、flex-grow: 1を指定します。

dl要素にも同じように、display: flexflex-direction: columnを指定。抜粋文の要素にflex-grow: 1を指定します。

flex-growを指定した要素だけ、伸びるようになる

ページトップへ戻る

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください