CSS多行文字溢出渐隐遮罩技巧

本文详解了CSS中实现多行文字溢出渐隐效果的实用方案——通过容器行数限制与溢出隐藏配合`::after`伪元素叠加线性渐变遮罩，既保证视觉上自然柔和的“渐隐”过渡，又不干扰用户点击、选中等交互行为；文中还覆盖了关键细节如精准定位、背景色适配、pointer-events设置及老浏览器兼容性优化，是前端开发中稳定可靠、开箱即用的排版技巧。

用 ::after 伪元素配合渐变背景，是最常用也最稳妥的多行文字溢出渐隐方案。关键在于遮罩层要精准覆盖在文字末尾，且不影响点击和选中行为。

基础结构：容器需设行数限制与隐藏溢出

先确保父容器能控制显示行数，并裁剪多余内容：

• 设置 display: -webkit-box 或使用 line-clamp（现代浏览器）
• 必须指定固定行高（如 line-height: 1.5）和最大高度（如 max-height: 3em）
• 加上 overflow: hidden 和 position: relative（为伪元素定位准备）

::after 遮罩层：用线性渐变实现透明过渡

伪元素盖在文字右下角，用从不透明到透明的渐变模拟“渐隐”效果：

• 定位方式推荐 position: absolute; bottom: 0; right: 0; width: 100%; height: 2em;
• 背景用 background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);（白色底时）
• 若背景非纯白，把 #fff 换成实际背景色，或改用 rgba(255,255,255,1) + 透明过渡
• 加 pointer-events: none; 确保不拦截文字交互

兼容性与细节优化

部分老浏览器（如旧版 Safari）对 -webkit-line-clamp 支持不稳定，建议：

• 用 -webkit-box-orient: vertical + -webkit-line-clamp 组合，同时保留 display: -webkit-box
• 渐变方向按溢出位置调整：右侧溢出用 to right，底部用 to bottom
• 遮罩高度建议略大于单行高（如 height: calc(1.5em + 4px)），避免露底
• 可加 z-index: 1 防止被其他元素遮挡

基本上就这些。核心就是“容器截断 + 伪元素遮罩 + 渐变过渡”，不复杂但容易忽略定位和 pointer-events。

本篇关于《CSS多行文字溢出渐隐遮罩技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！