MDN三月推出的全新設計令人驚艷！其中一些巧妙的CSS技巧值得細細品味，例如卡片組件處理截斷文本的方式。

是不是很酷？讓我們深入剖析一下。這種方法吸引我的主要原因有二：

• 它巧妙地截斷內容，這在其他地方被稱為CSS數據丟失。雖然數據丟失通常是不好的，但這里用得恰到好處，因為摘要本意就是對完整內容的預告。
• 這與使用text-overflow: ellipsis截斷文本的方式不同，Eric Eggert最近對此表達了他的擔憂。主要反對意見是無法恢復被截斷的文本——輔助技術會宣讀它，但視力正常的用戶無法恢復。MDN的方法提供了更多控制，因為截斷只是視覺上的。

MDN是如何做到的呢？HTML方面沒什么特別的，只是一個包含段落的容器。

<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

我們可以添加一些基礎樣式來完善它。

同樣，沒什么花哨的。我們的目標是截斷第三行后的內容。我們可以設置段落的max-height并隱藏溢出內容：

.card p {
  max-height: calc(4rem * var(--base)); /* 設置內容的截斷點 */
  overflow: hidden; /* 截斷內容 */
}

等等，calc()是什么？請注意，我預先設置了一個--base變量，可以用作公共乘數。我用它來計算字體大小、行高、卡片的填充，以及現在段落的max-height。我發(fā)現使用常量值更容易，尤其當所需的尺寸像這樣基于比例時。我注意到MDN也使用了類似的--base-line-height變量，可能出于同樣的目的。

如何讓第三行文本淡出？這是段落::after偽元素上的經典linear-gradient()，它固定在卡片的右下角。因此，我們可以這樣設置：

.card p::after {
  content: ""; /* 渲染偽元素所需 */
  background-image: linear-gradient(to right, transparent, var(--background) 80%);
  position: absolute;
  inset-inline-end: 0; /* 等同于`right: 0`的邏輯屬性 */
}

請注意，我調用了一個--background變量，它設置為與.card本身使用的背景顏色相同的背景顏色值。這樣，文本看起來就會淡入背景。我發(fā)現需要調整漸變中的第二個顏色停止點，因為當漸變完全混合到100%時，文本不會完全隱藏。我發(fā)現80%對我來說是一個不錯的點。

是的，::after需要高度和寬度。高度是--base變量再次發(fā)揮作用的地方，因為我們希望它按比例縮放段落的行高，以便用::after的高度覆蓋文本。

.card p::after {
  /* 同上 */
  height: calc(1rem * var(--base)   1px);
  width: 100%; /* 相對于.card容器 */
}

添加一個額外的像素高度似乎可以解決問題，但是當我查看DevTools時，MDN在沒有它的情況下也能做到這一點。再說一次，我也沒有使用top（或inset-block-start）來沿該方向偏移漸變。??♂?

現在p::after是絕對定位的，我們需要在段落上顯式聲明相對定位以保持::after在其流中。否則，::after將完全從文檔流中移除，并最終出現在卡片之外。這就是.card段落的完整CSS：

.card p {
  max-height: calc(4rem * var(--base)); /* 設置內容的截斷點 */
  overflow: hidden; /* 截斷內容 */
  position: relative; /* ::after需要 */
}

我們完成了，對吧？不！漸變似乎不在正確的位置。

我承認我在這方面犯了一個錯誤，并在MDN上啟動了DevTools來查看我錯過了什么。哦，是的，::after需要顯示為塊元素。當添加紅色邊框時，這一點非常清楚。??♂?

.card p::after {
  content: "";
  background: linear-gradient(to right, transparent, var(--background) 80%);
  display: block;
  height: calc(1rem * var(--base)   1px);
  inset-block-end: 0;
  position: absolute;
  width: 100%;
}

現在全部放在一起！

是的，VoiceOver似乎尊重完整文本。不過，我還沒有測試其他屏幕閱讀器。

我還注意到，MDN的實現從p::after中刪除了pointer-events。這可能是一種很好的防御策略，可以防止在選擇文本時出現奇怪的行為。我添加了它，至少在Safari、Firefox和Chrome中，選擇文本感覺更流暢一些。

以上是重新創(chuàng)建MDN＆＃039;的截斷文本效果的詳細內容。更多信息請關注PHP中文網其他相關文章！