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

これを↓


こんな↓感じに、

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

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

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

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

1 Like

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

1 Like

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


/*最終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 Like