Html 文本溢出属性的淡入淡出值是如何工作的？

我需要在每个flex子级中使用一行描述，为此，我希望使用该淡入值。但它不起作用

.柔性容器{ 显示器：flex； 柔性包装：包装； 证明内容：中心； 弯曲方向：行； } .灵活儿童{ 边框：1px黑色实心； 宽度：40%； 最大高度：3雷姆； 填充：10px； 保证金：5px； 溢出：隐藏； } .flex child p{ 字体大小：粗体； 字号：1rem； 溢出：隐藏； 文本对齐：对齐； 空白：nowrap； 文本溢出：fade10%； } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

淡入淡出只是在实验阶段，任何浏览器都可以使用

相反，您可以将一个伪元素添加到位于文本顶部并具有背景渐变的flex项目中

我还添加了指针事件：无；因此，您仍然可以选择下面的文本

要更改渐变的大小，只需更改.flex item:：after的宽度值

.柔性容器{ 显示器：flex； 柔性包装：包装； 证明内容：中心； 弯曲方向：行； } .灵活儿童{ 边框：1px黑色实心； 宽度：40%； 最大高度：3雷姆； 填充：10px； 保证金：5px； 溢出：隐藏； 位置：相对位置； } .flex-child：：之后{ 内容：； 显示：块； 位置：绝对位置； 排名：0； 右：10px；/*匹配父填充右*/ 身高：100%； 宽度：100px； 背景图像：向右线性渐变，RGBA255255,0，白色； z指数：2； 指针事件：无； } .flex child p{ 字体大小：粗体； 字号：1rem； 溢出：隐藏； 文本对齐：对齐； 空白：nowrap； } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

---

褪色只是在实验阶段。是的。哦，谢谢你。那么，还有什么方法是最好的呢？