::after不能直接覆盖text-overflow: ellipsis，因为后者仅作用于单行white-space: nowrap文本流，而::after插入dom末尾后会随整行被裁切；真正生效的遮盖方案需满足：容器position: relative、固定line-height、精确max-height、overflow: hidden及渐变背景遮罩。
为什么::after不能直接覆盖text-overflow: ellipsis
浏览器对 text-overflow: ellipsis 的处理发生在渲染管线底层，它只作用于单行、white-space: nowrap 的文本流；::after 伪元素插入在 DOM 内容末尾，但一旦触发截断，整个行内容（含伪元素）都会被裁掉。你看到“省略号没出现”或“…飘在左上角”，基本就是误用了这个组合。
::after 遮盖方案真正生效的条件
这不是真截断，而是用视觉欺骗模拟效果：固定行高 + 渐变遮罩 + 绝对定位省略号。必须同时满足：
-
position: relative在容器上，否则::after无法准确定位 -
line-height必须是固定值（如1.5或24px），不能用normal或百分比 -
max-height必须严格等于N × line-height（例如 3 行 × 1.5em =calc(1.5em * 3)） -
overflow: hidden不可少，否则文字会撑开容器 - 渐变背景要用
linear-gradient(to right, rgba(255,255,255,0), #fff 50%)，硬边会露底
响应式场景下容易忽略的细节
当容器宽度随屏幕变化时，em 单位比 px 更可靠，但前提是字体大小本身也响应式。常见翻车点：
- 父级用了
rem或vw动态字号，但max-height还写死48px→ 行数错乱 - 给
::after设了font-size: 12px，而容器字号缩小时，省略号相对变大、压字 - 没设
padding-right（推荐0.3em），小屏下省略号紧贴文字，视觉拥挤 - 背景色不是纯白（比如浅灰卡片），
::after的background没同步改 → 露出底下被裁半截字
多行“查看更多”按钮为什么不能只靠::after
::after 可以显示“查看更多”文字，但它无法响应点击、无法被键盘 focus、content 也不能动态切换成“收起”。真实交互必须用真实 DOM 元素，::after 只能做静态提示：
- 加
pointer-events: none，否则它会挡住底下按钮的点击区域 - “查看更多”文案要放在 HTML 里，CSS 仅控制显隐（比如用
.expanded::after { display: none }） - 屏幕阅读器完全读不到
::after的 content，无障碍必须依赖真实文本节点
实际最稳的路径是：小项目用 -webkit-line-clamp（Chrome/Safari/Edge 新版），需要兼容 Firefox 或旧 Edge 就老实用 ::after 遮盖方案——但得接受它是视觉拟合，不是语义截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
