CSS はテキスト フィールドの末尾の行末のインデントを処理します。クリックすると展開効果がさらに表示されます。

必要：

 図に示すように、省略記号は 3 行目の末尾に表示する必要があり、表示と非表示を切り替える [もっと見る] ボタンがあります。

従来のCSS処理方法：

テキストの行数を制御します。

// 複数行
display.text_morerow {     overflow: hidden;     display: -webkit-box;     -webkit-line-clamp: 2; // 表示行数を制御する     -webkit-box-orient:vertical;     word-break:すべてを突破する ;  }

このように設定しただけだと、効果は次のようになります。

しかし、コンテンツの表示と非表示を制御する「もっと見る」ボタンがまだあり、それを実現する方法について、新しいアイデアが得られました。

 html部分:

<div class="text-spread-container">
    <div class="text">我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字</div>
    <div class="btn">...查看更多</div>
</div>

 親要素の固定コンテナ:

.text-spread-container {

位置: 相対的;

オーバーフロー: 非表示;

最大高さ:100ピクセル;

}

子要素のテキストコンテナ:

。文章{

色: #1f1f1f;

行の高さ: 0.22rem;

}

「もっと見る」ボタンの CSS:

.btn {

位置: 絶対;

右: 0;

下: 0;

カーソル: ポインタ;

背景色: #fff;

}

疑似クラスのビジュアルを使用して、段階的なフェードアウト効果があるように見せます。

.btn:前 {

位置: 絶対;

右: 100%。

コンテンツ： "";

幅:0.16レム;

高さ:0.22レム;

背景画像: 線形グラデーション(270度,#fff,hsla(0,0%,100%,0));

}

.text 要素の高さが親要素の最大高さ 100 ピクセルより大きいかどうかを判断することで、「もっと見る」ボタンの表示を制御できます。「もっと見る」をクリックすると、親要素の高さが同じ高さに変更されます。子要素、または削除/追加された overflow-hidden プロパティは問題ありません。