複数行のテキストオーバーフロー: 省略記号省略記号の失敗の問題

質問：

複数行のテキストが省略記号の表示スタイルを超えるように設定されている場合、省略記号が有効にならないので、長い間悩んでいました。。。

CSSは次のとおりです。

HTML コード構造:

8 行目に省略記号が表示されますが、その後ろにはテキストが残っています。

解決する：

問題は、複数行テキストで省略記号を表示するように設定する場合、指定できるのは表示行数のみで、最も近いノードの高さは設定できないことです。！！

固定高さ px も相対高さ vh, rem も機能せず、高さがあれば上記のようになります。

1. 通常、テキストはspanまたはpで折り返され、親ノードが高さを設定し、子ノード(span/p)がスタイル(省略記号)関連のコードを設定します。

text-overflow: ellipsis; 
overflow: hidden; 
display: -webkit-box; //特殊な表示モード
-webkit-line-clamp: 8; // 行数
-webkit-box-orient:vertical; // のコンテンツボックスは垂直方向に配置されています

2. 親要素は有効な幅を持つ要素であり、必要な幅を設定します。

• ブロックレベル要素の幅と高さの属性はデフォルトで有効です。
• インライン要素 (インライン要素と呼ぶ人もいます) の幅と高さの属性は無効です。
• width プロパティと height プロパティは、表示を変更することで有効にできます。例: add display: block;

変更されたコード:

効果：

訂正してください！