重新創建MDN＆＃039;的截斷文本效果

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。我發現使用常量值更容易，尤其當所需的尺寸像這樣基於比例時。我注意到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中文網其他相關文章！