text-overflow: ellipsis 是首选，::after 遮盖是退路；前者需配合 white-space: nowrap 和 overflow: hidden 才生效，适用于绝大多数单行截断；后者仅在需自定义符号、兼容极老 ie 或容器尺寸不可控时作为补充方案，但存在定位不准、响应式失效、无障碍重复播报及多行不支持等严重缺陷。
text-overflow: ellipsis 是首选，::after 遮盖是退路
直接用 text-overflow: ellipsis 就能解决绝大多数单行截断需求。用 ::after 遮盖或手动拼接省略号，属于绕过浏览器原生机制的“手工活”，只在特定场景下有必要——比如需要自定义省略符号、兼容极老 IE（text-overflow 在 IE6–7 不生效）、或容器无法设固定宽高（如 flex 子项未约束尺寸）时才考虑。
为什么 ::after 遮盖方案容易出问题
用 ::after 在文本右侧叠加一个带背景的“…”并遮住溢出内容，看似灵活，但实际踩坑密集：
- 必须精确控制
::after的width、right和z-index，否则会遮不住、遮过头，或和文字重叠 - 文本换行后，
::after仍固守右上角，完全失效 - 响应式缩放时，遮盖区域不会自动适配，需配合 JS 重新计算
- 无障碍访问（如屏幕阅读器）会读出遮盖层里的“…”和原始文本，造成重复播报
多行截断不能靠 ::after，得用 -webkit-line-clamp 或 JS
想让两行或三行文本末尾统一显示省略号，::after 基本无解——它无法感知“第 N 行结束位置”。此时只有两个靠谱选择：
- 用
display: -webkit-box+-webkit-line-clamp: 2：Chrome/Safari/Edge 新版支持良好，但 Firefox 完全不认 - 用 JS 计算行高与容器高度，动态截断字符串 + 拼接
"…"：兼容性最好，但需监听窗口 resize 和字体加载完成事件 - 别指望纯 CSS 的
::after能替代这两者；它连行数都数不清
真要用 ::after 实现单行遮盖，这些参数缺一不可
如果业务强依赖自定义符号（比如用 "→" 替代 "…"），且确定只跑现代 Chrome，可参考这个最小可行结构：
.truncating {
position: relative;
width: 200px;
white-space: nowrap;
overflow: hidden;
}
.truncating::after {
content: "→";
position: absolute;
right: 0;
top: 0;
background: white; /* 必须和父容器背景一致 */
padding-left: 4px;
z-index: 1;
}
注意：background 必须匹配父容器底色，否则会漏出底层文字；padding-left 是为了留空隙避免压字；z-index 必须大于文本层级（默认为 auto），否则被盖住。
这种写法脆弱、难维护，上线前务必在不同字号、DPR 和 zoom 级别下实测——稍有偏差就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
