MDN三月推出的全新設(shè)計(jì)令人驚艷！其中一些巧妙的CSS技巧值得細(xì)細(xì)品味，例如卡片組件處理截?cái)辔谋镜姆绞健?/p>

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

• 它巧妙地截?cái)鄡?nèi)容，這在其他地方被稱為CSS數(shù)據(jù)丟失。雖然數(shù)據(jù)丟失通常是不好的，但這裡用得恰到好處，因?yàn)檎疽饩褪菍?duì)完整內(nèi)容的預(yù)告。
• 這與使用text-overflow: ellipsis截?cái)辔谋镜姆绞讲煌?，Eric Eggert最近對(duì)此表達(dá)了他的擔(dān)憂。主要反對(duì)意見(jiàn)是無(wú)法恢復(fù)被截?cái)嗟奈谋尽o助技術(shù)會(huì)宣讀它，但視力正常的用戶無(wú)法恢復(fù)。 MDN的方法提供了更多控制，因?yàn)榻財(cái)嘀皇且曈X(jué)上的。

MDN是如何做到的呢？ HTML方面沒(méi)什麼特別的，只是一個(gè)包含段落的容器。

<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ǔ)樣式來(lái)完善它。

同樣，沒(méi)什麼花哨的。我們的目標(biāo)是截?cái)嗟谌嗅岬膬?nèi)容。我們可以設(shè)置段落的max-height並隱藏溢出內(nèi)容：

 .card p {
  max-height: calc(4rem * var(--base)); /* 設(shè)置內(nèi)容的截?cái)帱c(diǎn)*/
  overflow: hidden; /* 截?cái)鄡?nèi)容*/
}

等等， calc()是什麼？請(qǐng)注意，我預(yù)先設(shè)置了一個(gè)--base變量，可以用作公共乘數(shù)。我用它來(lái)計(jì)算字體大小、行高、卡片的填充，以及現(xiàn)在段落的max-height 。我發(fā)現(xiàn)使用常量值更容易，尤其當(dāng)所需的尺寸像這樣基於比例時(shí)。我注意到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`的邏輯屬性*/
}

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

是的， ::after需要高度和寬度。高度是--base變量再次發(fā)揮作用的地方，因?yàn)槲覀兿Ｍ幢壤s放段落的行高，以便用::after的高度覆蓋文本。

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

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

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

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

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

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

 .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似乎尊重完整文本。不過(guò)，我還沒(méi)有測(cè)試其他屏幕閱讀器。

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

以上是重新創(chuàng)建MDN＆＃039;的截?cái)辔谋拘Ч脑敿?xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！