MDN三月推出的全新設計令人驚艷！其中一些巧妙的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 。我發現使用常量值更容易，尤其當所需的尺寸像這樣基於比例時。我注意到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本身使用的背景顏色相同的背景顏色值。這樣，文本看起來就會淡入背景。我發現需要調整漸變中的第二個顏色停止點，因為當漸變完全混合到100%時，文本不會完全隱藏。我發現80%對我來說是一個不錯的點。
是的， ::after需要高度和寬度。高度是--base變量再次發揮作用的地方，因為我們希望它按比例縮放段落的行高，以便用::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中，選擇文本感覺更流暢一些。
以上是重新創建MDN＆＃039;的截斷文本效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
