たつをの ChangeLog : 2022-08-29

HTML と CSS でのWebページ表示の話題。
カンマ区切り表示でラベルを羅列している箇所で一定数以上になったらあとは省略する方法。

例えば最初の2つだけ表示してそれより後ろのは見せないようにする。
その際に省略記号（"..."など）も表示する。
つまり、

• "aaaaaa, bbbbbb, cccccc, dddddd" を "aaaaaa, bbbbbb, ..." にしたい
• "eeeeee, ffffff" は省略せずそのまま "eeeeee, ffffff" で

ということ。

コードと見え方：

<div class="label-list">
<span>aaaaaa</span><span>, </span>
<span>bbbbbb</span><span>, </span>
<span>cccccc</span><span>, </span>
<span>dddddd</span>
</div>
<div class="label-list">
<span>eeeeee</span><span>, </span>
<span>ffffff</span>
</div>
<div class="label-list">
<span>gggggg</span>
</div>
<style>
.label-list > span:nth-child(n+5) { display: none; }
.label-list > span:nth-child(n+4)::after { content: '...' }
</style>

---

aaaaaa, bbbbbb, cccccc, dddddd

eeeeee, ffffff

gggggg

ラベルだけでなく区切り文字も span で囲っておくのがポイント。
区切り文字なので最後は無し。

最初の2つの場合は 2 x 2 + 1 = 5 番目以降の要素 (nth-child(n+5)) を非表示。

区切り文字領域の後に省略記号をくっつける仕組みなので、表示したい数以内の場合は省略記号が表示されない（重要）。

参考

• :nth-child() - CSS: カスケーディングスタイルシート | MDN