直接用 text-overflow: ellipsis 不够用，因其省略号为固定字符（U+2026），无法改色、加图标、换字体或置于文字中间/左侧，也无法满足“…更多”等带语义的截断提示需求。
为什么直接用 text-overflow: ellipsis 不够用？
因为它的省略号是固定字符（U+2026），无法改颜色、加图标、换字体，也不能放在文字中间或左侧。遇到设计要求“…更多”“→ 查看详情”或“[...]”这种带语义的截断提示时，text-overflow 就失效了。
::before 和 ::after 伪元素怎么配合 overflow: hidden 工作？
关键不是“覆盖”，而是“视觉欺骗”：让容器本身不显示省略号，靠伪元素在右边缘“画”一个自定义符号，同时用 overflow: hidden 把原生文本真正溢出的部分裁掉。
- 容器必须设
position: relative，否则伪元素定位会脱标 - 伪元素要用
position: absolute定位到右下角（比如right: 0; bottom: 0） - 伪元素的
content必须是非空字符串（哪怕只是"…"），否则不渲染 - 如果容器高度不确定，
bottom: 0可能错位，建议统一用top: 50%; transform: translateY(-50%)垂直居中
单行文本用 ::after 插入省略号的最小可行代码
以下代码能稳定工作，且兼容 IE11+：
.custom-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.custom-ellipsis::after {
content: " →";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #fff; /* 覆盖被裁掉的文字末尾，避免重叠毛边 */
padding-left: 4px;
color: #666;
}注意：background: #fff 不是装饰，是必须项——它遮住被 overflow: hidden 裁掉但还没完全消失的半个字，否则会出现锯齿或残影。
立即学习“前端免费学习笔记（深入）”；
多行文本慎用 ::before / ::after 模拟省略号
多行场景下，-webkit-line-clamp 是唯一可靠方案；伪元素强行模拟会导致行高错乱、省略位置漂移、iOS Safari 渲染异常等问题。
真要自定义多行省略样式，只推荐两种做法：
- 服务端或 JS 截断后手动拼接
"… 更多"，再塞进 DOM - 用
display: -webkit-box+::after，但仅限 WebKit 内核，且::after必须设pointer-events: none，否则点击区域错位
伪元素做省略号本质是“障眼法”，越靠近布局边界（如多行、flex 子项、table-cell），越容易露馅。真要稳定，还是老老实实写 JS 截断逻辑。
