一部が隠れる「.comment」を非表示にしたい

カスタマイズ
1

これを↓

ygvgfgvvghhgvhvg
ygvgfgvvghhgvhvg1350×762 25.2 KB

こんな↓感じに、
ygvgfgvvghhgvhvg
ygvgfgvvghhgvhvg1350×762 22.2 KB

一部が表示されない（？）やつは全部表示されなくするようなカスタマイズをCSSのみで行うことは可能でしょうか。（高さと個数を固定する以外で）

2

考え方としましては
・CSSで、コメントの表示数を２個（表示数は適宜）などに限定する。
・CSSで、ボックスの並びを上揃えに変更する（デザイン上不要であれば下揃えのままで変更不要）
・OBSで、テンプレート（ウィンドウ）の縦幅を十分にとる。
といった感じで、やりたい感じの事は概ねできそうな気がします。

image
image1064×576 108 KB 

.comment:nth-last-child(n+3) {
    display: none;
}
.comments{
  justify-content: flex-start; /* 配信レイアウト的に下揃えのままで良い場合は不要 */
  /* height:auto; 枠の高さを可変に（レイアウト的に必要であれば） */
}

以上、イメージとマッチしましたら幸いです:+1:

「いいね！」 1
3

ありがとうございます！余白をおおめにとった上で個数を限定は思いつきませんでした。試したらまた報告します :chicken:

「いいね！」 1
4

いい感じになりました！ありがとうございました。

image
image1388×826 310 KB 

/*最終CSS*/
:root{
--lcv-background-color: tansplant;
/*--lcv-border-color: black;
--lcv-text-color: black;
--lcv-name-color: black;*/
}
.comments{
height: 100%;
}
.comment:nth-last-child(1) {
    max-height: 80%;
}
.comment:nth-last-child(2) {
    max-height: 20%;
}
.comment:nth-last-child(n+3) {
    display: none;
}
.comments{
  justify-content: flex-start;
}
「いいね！」 1