MDN＆＃039;の切り捨てられたテキスト効果を再現します

3月に発売されたMDNの新しいデザインは素晴らしいです！これらの巧妙なCSSトリックのいくつかは、カードコンポーネントが切り捨てられたテキストを処理する方法など、味わう価値があります。

かっこいいですか？より深い分析をしましょう。この方法が私を惹きつける主な理由は2つあります。

• CSSデータ損失として他の場所で知られているコンテンツを巧みに切り捨てます。データの損失は通常悪いですが、要約は完全なコンテンツのプレビューになることを目的としているため、ここですぐに使用されます。
• これは、 text-overflow: ellipsisを使用してテキストを切り捨てることとは異なり、エリックエガートは最近懸念を表明しました。主な異議は、切り捨てられたテキストを回復できないことです。支援技術はそれを読みますが、通常のビジョンを持つユーザーはそれを回復することはできません。 MDNメソッドは、トランケーションは視覚的なみであるため、より多くの制御を提供します。

MDNはどのようにしますか？ HTMLには特別なものはありません。段落を含む容器だけです。

<div>
  <p>Lorem Ipsum dolor sit amet conectetur apisicing Elit。</p>
</div>

基本的なスタイルを追加して完成させることができます。

繰り返しますが、派手なものは何もありません。私たちの目標は、3行目の後にコンテンツを切り捨てることです。段落のmax-heightを設定して、オーバーフローを隠すことができます。

 .card p {
  max-height：calc（4rem* var（ -  base））;
  オーバーフロー：hidden*
}

待って、 calc()とは？共通の乗数として使用できる--base変数プリセットがあることに注意してください。私はそれを使用して、フォントのサイズ、ラインの高さ、カードの塗りつぶし、そして今では段落のmax-height計算します。特に必要なサイズがこのようなスケールに基づいている場合、一定の値を使用する方が簡単です。 MDNは、おそらく同じ目的のために、同様の--base-line-height変数も使用していることに気付きました。

テキストの3番目の行をフェードアウトするにはどうすればよいですか？これは、カードの右下隅に固定された擬似要素::after上の古典的なlinear-gradient()です。したがって、次のように設定できます。

 .card p ::後{
  コンテンツ： "";
  背景画像：線形勾配（右、透明、var（ - 背景）80％）;
  位置：絶対;
  Inset-inline-end：0;*右：0`* /
}

.card自体で使用されている背景色と同じ背景色の値に設定されている--background変数を呼び出したことに注意してください。このようにして、テキストは背景に衰退しているように見えます。勾配が完全に100％ブレンドされているときにテキストが完全に隠されていないため、勾配の2番目のカラーストップポイントを調整する必要があることがわかりました。 80％が私にとって良い点であることがわかりました。

はい、 ::after高さと幅が必要です。高さは、 --base変数が再び機能する場所です。なぜなら、段落のライン高さをスケーリングして、テキストを::after高さでカバーすることを望んでいるからです。

 .card p ::後{
  /*上記と同じ*/
  高さ：calc（1rem * var（ -  base）1px）;
  幅：100％。
}

追加のピクセルの高さを追加すると、問題が解決するように思われますが、DevToolsを見ると、MDNはそれなしでそれを行うことができます。繰り返しますが、私はその方向の勾配を相殺するためにtop （またはinset-block-start ）を使用していません。 ？

p::after配置が絶対に配置されたので、段落の相対的な位置を明示的に宣言する必要があります::after 。それ以外の場合は、 ::afterドキュメントストリームから完全に削除され、最終的にはカードの外に表示されます。これは.card段落の完全なCSSです。

 .card p {
  max-height：calc（4rem* var（ -  base））;
  オーバーフロー：hidden*
  位置：相対的なもの;
}

完了ですよね？いいえ！勾配は正しい場所にないようです。

私はこれで間違いを犯し、MDNでDevToolsを始めて、私が欠けているものを確認しました。ああ、はい、 ::afterブロック要素として表示する必要があります。これは、赤い境界線を追加するときに非常に明確です。 ？

 .card p ::後{
  コンテンツ： "";
  背景：線形勾配（右、透明、var（ - 背景）80％）;
  表示：ブロック;
  高さ：calc（1rem * var（ -  base）1px）;
  Inset-Block-End：0;
  位置：絶対;
  幅：100％;
}

今それをすべてまとめてください！

はい、ボイスオーバーは全文を尊重しているようです。ただし、他のスクリーンリーダーをテストしていません。

また、MDNの実装がp::after pointer-eventsを削除することに気付きました。これは、テキストを選択するときに奇妙な動作を防ぐための優れた防御戦略かもしれません。私はそれを追加しました、そして少なくともSafari、Firefox、およびChromeでは、テキストの選択は少しスムーズに感じます。

以上がMDN＆＃039;の切り捨てられたテキスト効果を再現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。