テキストの省略の問題: 単一行、複数行、フレックスボックスの特殊なケース

記事はとてもシンプルで、乾物に直行するだけです！

1. 1行のテキストを省略したい場合は、以下のクラス名をコピーしてください

   1、单行文字，文字省略
   .ellipsis-1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
   }

2. 複数行表示後に省略が必要な場合は、以下のコードをコピーしてください (この 2 を必要に応じて変更してください)。

   .ellipsis-2 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }

3. 特殊なケース: テキストがフレックス ボックス内にある場合、overflow: hidden は無効になります。このとき、親ボックスに 2 つの属性を追加する必要があります。

   div {
       flex:1;
       witdh:0;
   }

   flex: ボックスの幅を制御するために使用され、幅は弾性ボックスを引き伸ばさずにテキストを制限するために使用されます!

   ---

乾物満載ですので、お役に立ちましたら高評価お願いします！