::after 无法替代 text-overflow: ellipsis，因其不参与文本流布局、无法感知溢出状态，只能固定显示在元素末尾；单行截断必须依赖 overflow: hidden、white-space: nowrap、text-overflow: ellipsis 三者协同。
为什么直接用 ::after 无法替代 text-overflow: ellipsis
因为 ::after 是在元素内容之后插入生成内容，它不参与文本流的布局计算，也不能感知父容器的宽度限制或文本是否溢出。你没法让 ::after “自动”出现在被截断的位置——它只会固定出现在整个元素末尾，哪怕文本根本没溢出，或者已经换行多次。
常见错误是写成这样：
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
}
.truncate::after {
content: '…';
}结果是：无论文本多短，都会强行加一个省略号；而一旦文本过长但未触发 overflow: hidden（比如用了 flex 或 inline 布局），又完全不生效。
单行截断必须用 text-overflow: ellipsis，::after 只能辅助
标准单行省略号依赖三个属性同时生效：overflow: hidden、white-space: nowrap、text-overflow: ellipsis。这是浏览器原生行为，::after 插入的内容无法复现该逻辑。
立即学习“前端免费学习笔记（深入）”；
但 ::after 可用于增强场景，比如：
- 需要动态控制省略号样式（如红色、带背景）——可配合
text-overflow使用，覆盖默认省略号（需字体支持，且兼容性有限） - 在截断后追加图标或文字说明（如「+2 more」），此时要确保父容器有足够空间，否则
::after自身也会被裁掉 - 服务端已做截断，前端只需补省略号，且确定文本一定超长（这时
::after才安全）
多行截断时 ::after 才真正有用，但得配 -webkit-line-clamp
纯 CSS 多行省略号目前只有 WebKit 内核稳定支持，核心是 display: -webkit-box + -webkit-line-clamp。此时 ::after 可以作为“视觉补充”，比如替换默认省略号为自定义符号，或添加点击展开按钮。
关键点：
-
::after必须设为position: absolute，并放在父容器position: relative内，否则会撑开容器 - 不能依赖
content自动判断是否截断——它永远显示，所以只适用于“确定已截断”的场景 - 若想实现“仅在截断时显示”，必须用 JavaScript 检测
scrollHeight > clientHeight，再切换类名控制::after显隐
示例（仅 WebKit）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
position: relative;
}
.multi-line::after {
content: '…';
position: absolute;
bottom: 0;
right: 0;
background: white; /* 遮盖被截断的文字边缘 */
padding-left: 4px;
}容易被忽略的兼容性和性能坑
-webkit-line-clamp 在 Firefox 和旧版 Edge 中完全无效；即使在 Chrome/Safari，如果父容器用了 transform 或 will-change，可能破坏 -webkit-box 布局。
用 ::after 模拟省略号还可能引发重排：如果它设置了 width 或 font-size 且父容器尺寸不稳定，会导致反复回流。
真正需要动态省略逻辑时，别硬扛 CSS——直接上 JavaScript 库如 clamp.js 或手写截断函数，比折腾 ::after 更可靠。
