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

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

• 它巧妙地截斷內(nèi)容，這在其他地方被稱為CSS數(shù)據(jù)丟失。雖然數(shù)據(jù)丟失通常是不好的，但這裡用得恰到好處，因為摘要本意就是對完整內(nèi)容的預(yù)告。
• 這與使用text-overflow: ellipsis截斷文本的方式不同，Eric Eggert最近對此表達(dá)了他的擔(dān)憂。主要反對意見是無法恢復(fù)被截斷的文本——輔助技術(shù)會宣讀它，但視力正常的用戶無法恢復(fù)。 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>

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

同樣，沒什麼花哨的。我們的目標(biāo)是截斷第三行後的內(nèi)容。我們可以設(shè)置段落的max-height並隱藏溢出內(nèi)容：

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

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

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

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

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

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

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

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

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

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

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

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

 .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%;
}

現(xiàn)在全部放在一起！

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

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

以上是重新創(chuàng)建MDN＆＃039;的截斷文本效果的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！