CSS - テキストオーバーフローの省略記号表示

1 行のテキスト オーバーフローの省略記号 -- 3 つの条件を満たす必要があります

1. 最初にテキストを強制的に 1 行で表示する

   white-space: nowrap;/*デフォルトは通常の自動改行です*/
   

2. 余分なものを隠す

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

3. テキストは、パーツを超えて省略記号に置き換えられます

   テキストオーバーフロー: 省略記号;
   

複数行テキストのオーバーフローの省略記号

複数行のテキスト オーバーフローで省略記号が表示され、webKit ブラウザーに適しています

overflow: hidden; 
text-overflow: ellipsis; 
/* エラスティック ボックス モデルの表示 */ 
display: -webkit-box; 
/* ブロック要素に表示されるテキスト行数を制限する */ 
-webkit-line-clamp: 2; 
/ * フレックス ボックス オブジェクトの子要素の配置を設定または取得します*/ 
-webkit-box-orient: vertical;

実際、省略記号の出力はバックエンドでも制御できるため、フロントエンドは表示される単語の数を制御するだけで済みます。