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中文网其他相关文章！
