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

>

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

クールではありませんか？より深い分析をしましょう。このアプローチが私にアピールする主な理由は2つあります。データの損失は通常悪いですが、要約は完全なコンテンツのプレビューになることを目的としているため、ここですぐに使用されます。

これは、 Text-overflow：Ellipsis を使用してテキストを切り捨てることとは異なります。主な異議は、切り捨てられたテキストを回復できないことです。支援技術はそれを読みますが、通常のビジョンを持つユーザーはそれを回復することはできません。 MDNメソッドは、トランケーションは視覚的なみであるため、より多くの制御を提供します。

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

 <div> <p> lorem ipsum dolor sit amet apisicing elit elit a ailiquam nobis nam accusantium、minima quam istem neque neque neque neque nulla esse esse dulla esse modi impedit sapiente vero？ </p> <p>同じ、派手なものは何もありません。私たちの目標は、3行目の後にコンテンツを切り捨てることです。パラグラフの<code> max-height </code>を設定し、オーバーフローコンテンツを非表示にすることができます。 <code> -base </code>変数プリセットがあることに注意してください。これらのプリセットは、共通の乗数として使用できます。それを使用して、フォントサイズ、ラインの高さ、カードの塗りつぶし、そして段落の<code> max-height>を計算します。特に必要なサイズがこのようなスケールに基づいている場合、一定の値を使用する方が簡単です。 MDNは、おそらく同じ目的のために、同様の<code> -Base-Line-Height </code>変数も使用していることに気付きました。 </code></p> <p> 3番目のテキストをフェードアウトするにはどうすればよいですか？これは、カードの右下隅に固定されているパラグラフ ::後のパラグラフの擬似要素の古典的な<code> linear-gradient（）</code>です。したがって、</p> <pre class="brush:php;toolbar:false">。{content： ""; - バックグラウンド変数。これは、<code> .card </code>自体で使用される背景色と同じ背景色値に設定されています。このようにして、テキストは背景に衰退しているように見えます。勾配が完全に100％ブレンドされているときにテキストが完全に隠されていないため、勾配の2番目のカラーストップポイントを調整する必要があることがわかりました。 80％が私にとって良い点であることがわかりました。  <p>はい、<code> ::後</code>には高さと幅が必要です。高さは、<code> -base </code>変数が再び登場する場所です。なぜなら、段落のライン高さをスケーリングして、の後の高さでテキストを上書きすることを望んでいるからです。 </p> <pre class="brush:php;toolbar:false">。繰り返しますが、<code> top </code>（または<code> inset block-start </code>）を使用して、その方向の勾配を相殺していません。 ？‍♂ ‍♂️  <p> Now <code> p ::後の</code>は絶対に配置されているため、段落の相対的な位置を明示的に宣言して、<code> :: </code>をストリームに保つ必要があります。それ以外の場合、<code> ::後の</code>はドキュメントストリームから完全に削除され、最終的にはカードの外に表示されます。これは、<code>の完全なCSSです</code></p> <pre class="brush:php;toolbar:false"> .card p {4rem* var（ -  base））いいえ！勾配は正しい場所にないようです。  <p>私はこれに間違いを犯し、MDNでDevToolsを始めて、私が見逃したものを見ることができました。ああ、はい、<code> ::後の</code>をブロック要素として表示する必要があります。これは、赤い境界線を追加するときに非常に明確です。 ？ </p> <p>はい、ボイスオーバーは全文を尊重しているようです。ただし、他のスクリーンリーダーをテストしていません。 </p> <p> MDNの実装が<code> pointer-events </code>を<code> p ::後に削除することにも気付きました。これは、テキストを選択するときに奇妙な動作を防ぐための優れた防御戦略かもしれません。私はそれを追加しました、そして少なくともSafari、Firefox、およびChromeでは、テキストの選択は少しスムーズに感じます。 </code></p>