CSS3プロパティline-clampはテキスト行の使用を制御します

説明: ブロック要素に表示されるテキストの行数を制限します。

-webkit-line-clamp は、CSS ドラフト仕様には記載されていない、サポートされていない WebKit プロパティです。

この効果を実現するには、他の特殊な WebKit プロパティを組み合わせる必要があります。共通の組み合わせプロパティ:

display: -webkit-box; は、オブジェクトを弾性ボックスモデルとして表示する必須属性です。
-webkit-box-orient は、フレックスボックスオブジェクトの子要素の配置を設定または取得するプロパティと組み合わせる必要があります。
text-overflow を使用すると、複数行のテキストの場合に、範囲を超えたテキストを省略記号「...」で非表示にすることができます。

本日、投稿リストのコンテンツを「…」省略記号を使用して3行に短縮するという最適化リクエストを受け取りました。

<!DOCTYPE HTML>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>クラインクランプ</title>
    <スタイル>    
            。箱{
                幅: 200ピクセル;
                高さ: 300px;
                border:1px 黒一色;
            }
            p{
                 ディスプレイ: -webkit-box;
                 -webkit-box-orient: 垂直;
                  -webkit-line-clamp: 4; /*p 要素の最大行数を 4 に設定します。親要素は幅を埋めて明確にする必要があります*/
                  テキストオーバーフロー: 省略記号;
                  オーバーフロー: 非表示;
                 /* 自動プレフィックス: オフ */
                 -webkit-box-orient: 垂直;
                  /* 自動プレフィックス: オン */
                  /*コード環境のため、webkit-box-orient はフィルタリングされます。このキーワードの自動プレフィックスはフィルタリングから除外できます。*/
          単語折り返し:単語区切り;
          単語区切り:すべて区切り;
} </スタイル> 
</head> 
<本文> 
<div class="box"> 
    <p> static: オブジェクトは通常のフローに従います。上、右、下、左などのプロパティは適用されません。 relative: オブジェクトは通常のフローに従い、通常フロー内の位置を基準として top、right、bottom、left プロパティでオフセットされた場合、通常フロー内のどの要素にも影響しません。 absolute: オブジェクトは通常のフローから外れており、top、right、bottom、left などのプロパティを使用して絶対的に配置されます。
    </p> 
</div> 
</本文> 
</html>

効果は以下のとおりです。

タグ内のテキストが英語の場合、自動的に折り返されないので、自動的に折り返すには次のコードを追加する必要があります。

単語折り返し:単語区切り;
単語区切り:すべて区切り;

もちろん、プラグインclamp.jsを使用することもできます。

CSS3 プロパティの line-clamp を使用してテキストの行数を制御する方法についてはこれで終わりです。CSS3 プロパティの line-clamp を使用して行数を制御する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySql バッチに挿入するときにデータの重複を避ける方法

>>: Vueプラグインの詳しい説明