【CSS小ネタ】liタグ4行以上を非表示する代わりに「…」を表示する

というのを、JavaScriptを使うのも面倒だなと思い、CSSだけで実現しました。
CSSのコメントで解説書きました～。

/*とりあえず、無条件で3番目の要素の後に…を挿入する*/
ul > li:nth-child(3)::after{
    content: '…';
}

/*最後の要素の後に空文字を挿入する。これにより、要素数が3個の場合は…が空文字へ上書きされる*/
ul > li:last-child::after{
    content: '';
}

/*4行目以降は非表示にする。*/
ul > li:nth-child(n+4){
    display: none;
}

<ul>
    <li>パルミジャーノ・レッジャーノ</li>
</ul>

<ul>
    <li>パルミジャーノ・レッジャーノ</li>
    <li>ゴルゴンゾーラ</li>
</ul>

<ul>
    <li>パルミジャーノ・レッジャーノ</li>
    <li>ゴルゴンゾーラ</li>
    <li>タレッジョ</li>
</ul>

<ul>
    <li>パルミジャーノ・レッジャーノ</li>
    <li>ゴルゴンゾーラ</li>
    <li>タレッジョ</li>
    <li>モッツァレラ</li>
</ul>

<ul>
    <li>パルミジャーノ・レッジャーノ</li>
    <li>ゴルゴンゾーラ</li>
    <li>タレッジョ</li>
    <li>モッツァレラ</li>
    <li>カチョカバロ</li>
</ul>

See the Pen 4行以上の場合に省略表示する by momosetkn (@momosetkn) on CodePen.

参考資料

何番目系の便利なCSSまとめ - Qiita