内容超出容器时加渐变遮罩本质是用CSS伪元素实现视觉过渡，JavaScript仅动态判断是否溢出并切换类；需用scrollHeight > clientHeight结合overflowY状态精准检测，遮罩层用::after配合linear-gradient和pointer-events: none实现“软裁剪”。
内容超出容器时加渐变遮罩，本质是用视觉过渡弱化截断感，不是靠 JavaScript 控制内容显示/隐藏，而是用 CSS 实现“自然收尾”。JavaScript 的作用仅限于动态判断是否溢出、自动添加或移除遮罩类——真正起效的是 CSS 渐变蒙版。
判断内容是否溢出容器
需对比元素的滚动高度（scrollHeight）与可视高度（clientHeight），再结合是否出现滚动条（overflow-y: auto 且 scrollHeight > clientHeight）来确认是否需要遮罩。
- 用
element.scrollHeight > element.clientHeight判断文字是否实际超出 - 避免仅凭高度差误判：若容器设置了
overflow: hidden但内容未撑开，scrollHeight可能等于clientHeight - 推荐配合
getComputedStyle(element).overflowY === 'auto'或检查是否有滚动条（如element.scrollHeight - element.clientHeight > 1）
CSS 渐变遮罩的核心写法
遮罩层不是新 DOM 元素，而是用伪元素（::after）叠加在容器右下角，背景为垂直/水平线性渐变，从透明过渡到容器背景色，实现“软裁剪”效果。
- 容器需设
position: relative，以便伪元素定位 -
::after宽高覆盖遮罩区域（如底部 40px），background: linear-gradient(to bottom, transparent, white)（注意配色要匹配容器背景） - 必须加
pointer-events: none，否则会拦截鼠标事件 - 示例关键 CSS：
.text-container { position: relative; }<br>.text-container.overflowing::after {<br> content: '';<br> position: absolute;<br> bottom: 0;<br> left: 0;<br> width: 100%;<br> height: 40px;<br> background: linear-gradient(to bottom, transparent, #fff);<br> pointer-events: none;<br>}JavaScript 自动开关遮罩类
监听内容变化或窗口尺寸调整后重新检测，根据结果增删 overflowing 类。适合静态文本；若内容由 JS 动态插入，应在插入后立即调用检测函数。
立即学习“Java免费学习笔记（深入）”；
- 封装检测函数：
function checkOverflow(el) { el.classList.toggle('overflowing', el.scrollHeight > el.clientHeight); } - 初始加载时执行：
checkOverflow(document.querySelector('.text-container')); - 响应窗口缩放：
window.addEventListener('resize', () => checkOverflow(el)); - 如内容异步加载（如 Ajax 填充），填充完成后手动触发一次
checkOverflow
注意事项与常见坑
渐变遮罩对背景有强依赖——如果容器背景是图片、渐变或透明，纯白渐变会穿帮。此时应改用和背景一致的渐变终点色，或改用 mask-image（兼容性稍弱，Chrome/Firefox 支持良好）。
- 移动端需注意
vh单位在 Safari 中的视口变化问题，可能导致clientHeight计算偏差 - 行内元素（如
span）无法直接设overflow或position，需包裹成块级容器再处理 - 避免对
textarea或input直接套用——它们原生支持滚动，遮罩意义不大，且交互易冲突
