text-overflow: ellipsis 无法直接加“查看更多”因其仅支持省略号且不支持点击；伪元素::after需绝对定位+pointer-events: none才能覆盖，单行可靠、多行易错位，真实DOM更稳妥。
text-overflow: ellipsis 为什么不能直接加“查看更多”
因为 text-overflow: ellipsis 只能渲染省略号（…），不支持插入任意文本，更没法绑定点击行为。伪元素 ::after 看似能“盖上去”，但默认在内容末尾外侧，而溢出裁剪区域（overflow: hidden）会把它直接切掉——这是最常卡住的地方。
用 ::after 覆盖溢出区域的关键姿势
必须脱离正常文档流，靠绝对定位“手动摆到右下角”。前提是父容器设 position: relative，且子元素（如 p 或 span）需预留右侧空间，否则文字和“查看更多”会重叠。
- 给文本容器设
position: relative和padding-right: 60px（为“查看更多”留位） - 文本元素本身设
text-overflow: ellipsis、white-space: nowrap、overflow: hidden -
::after设position: absolute、right: 0、bottom: 0，并用transform: translateY(-100%)往上微调对齐 - 务必加
pointer-events: none到::after，否则会挡住下面文字的点击/选中
.text-box {
position: relative;
padding-right: 60px;
}
.text-box span {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-box::after {
content: "查看更多";
position: absolute;
right: 0;
bottom: 0;
transform: translateY(-100%);
pointer-events: none;
color: #007bff;
font-size: 14px;
}
单行 vs 多行场景下 ::after 的兼容性差异
上面写法只适用于单行截断。多行（比如用 -webkit-line-clamp）时，::after 无法精准锚定到最后一行末尾——浏览器不暴露行高位置，绝对定位会飘。此时“查看更多”只能放在块级容器底部，靠 margin-top: -20px 这类负边距硬拉，但不同字体、行高下极易错位。
- 单行：可靠，
::after定位稳定，适合标题、标签等短文本 - 多行：不推荐用
::after覆盖，改用真实 DOM 元素（如<button></button>）放在容器外侧更可控 - IE11 不支持
-webkit-line-clamp，也部分不支持::after在overflow: hidden内显示，得降级为 JS 计算字符数截断
点击“查看更多”时的真实交互陷阱
视觉上“查看更多”是盖在文字上的，但用户真正想点的是它背后的文本容器。如果没处理好层叠顺序和事件穿透，可能点不动、或点了没反应。
立即学习“前端免费学习笔记（深入）”；
-
::after必须设pointer-events: none，否则它会拦截所有鼠标事件 - 如果“查看更多”需要独立点击逻辑（比如展开全文），就得用真实元素替代伪元素，再用
z-index显式控制层级 - 移动端要注意
touch-action: manipulation防止点击延迟，但别加在::after上——伪元素不支持该属性
