純粋なCSSによるマルチラインの切り捨て

これは、純粋なCSSを使用してマルチラインテキストの切り捨てを実装するためのヒントです。この記事ではline-heightと擬似要素を使用してテキストの切り捨てを実装し、楕円を表示する巧妙な方法を紹介します（…）。

この記事は、シングルラインのテキストの切り捨てに対処する標準化された方法があるが、マルチラインテキストの切り捨てはまだ難しいことを指摘しています。この記事で導入された純粋なCSSメソッド（JavaScriptまたはサーバー側の操作なし）は、その単純さについて高く評価されています。 Firefox 68以上は、この方法のブラウザの互換性を向上させる-webkit-line-clampをサポートし始めました。

ただし、この記事では、テキストの高さ計算にline-height使用するより賢いCSS技術に焦点を当てています。要素のline-heightが1.4レムであると仮定して、最大3行のテキストを表示するには、 max-heightを1.4rem * 3に設定します。使用のために、この記事では、グローバルline-heightを設定するためにCSS変数--lhを定義することを推奨しています。

 html {
  -LH：1.4rem;
  Line-Height：var（ -  lh）;
}

次に、 max-heightとoverflow: hidden

 .truncate-overflow {
   - マックスライン：3;
  max-height：calc（var（ -  lh） * var（ -  max-lines））;
  オーバーフロー：隠し;
}

テキストを切り捨てた後に楕円を表示するには、この記事では、テキストの右隅に楕円を追加する::before擬似要素を使用します。

 .truncate-overflow :: before {
  コンテンツ： "...";
  位置：絶対;
  下：0;
  右：0;
}

この記事では、テキストの行の数が--max-linesよりも少ない場合に楕円を表示しないようにするために、別の擬似要素::after楕円を上書きすることができると指摘しました。

 .truncate-overflow ::後{
  コンテンツ： "";
  位置：絶対;
  右：0;
  幅：1rem;
  高さ：1REM;
  背景：白。
}

この記事では、さまざまな言語やテキストフローシナリオの互換性を改善するために、CSS論理プロパティ（ rightではなくinset-inline-endなど）の使用について言及し、この方法の制限を指摘しています。省略記号は最後の単語に近いものではありません。さらに、この記事では、この方法の潜在的なアクセシビリティの問題についても言及しています。切り捨てられたテキストにインタラクティブな要素が含まれている場合、これらの要素は焦点が合っていますが、見えません。

以上が純粋なCSSによるマルチラインの切り捨ての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。