直接用::after加“阅读更多”常不显示，因其不感知内容溢出且默认inline，遇overflow:hidden或无content即被裁剪或忽略；必须设非空content（如" "或"阅读更多"），多行截断时定位易错位，真可靠方案需js检测scrollheight>clientheight后动态添加类触发显示。
为什么直接用 ::after 加“阅读更多”常常不显示
因为 ::after 不会感知内容是否溢出，它无条件渲染；更关键的是，它默认是 display: inline，而如果父容器设置了 overflow: hidden、height 限制或内部为空，伪元素就根本不会出现在可视区域里。你看到“没反应”，大概率不是写错了样式，而是它被裁掉了或者压根没生成。
::after 必须配 content，且不能是空字符串
content: "" 等价于没写 content，浏览器直接忽略该伪元素。要让它出现，至少得写 content: " "（一个空格）或具体文字：
-
content: "阅读更多";—— 最简可用写法 -
content: "\2197";—— Unicode 箭头符号，轻量兼容 -
content: attr(data-more);—— 需 HTML 中有data-more="阅读更多"属性
别依赖 content: url() 插图，高 DPI 下模糊，且无法随字号缩放；图标优先用字体或 SVG 背景。
多行截断场景下，::after 定位极易错位
用 -webkit-line-clamp 控制三行溢出时，::after 无法锚定到最后一行末尾——浏览器不暴露行位置信息。常见错误写法是：
article::after { content: "阅读更多"; position: absolute; bottom: 0; right: 0; }
结果是图标飘在容器底部，和文字脱节。真实可行的方案只有两种：
- 把
::after放在容器外侧（如article + .more-btn），用真实 DOM 元素承载点击逻辑 - 若坚持用伪元素，只能退回到单行场景（
white-space: nowrap; text-overflow: ellipsis;），此时position: absolute才稳定
IE11 不支持 -webkit-line-clamp，也不保证 ::after 在 overflow: hidden 内可见，必须降级为 JS 截断。
真正“自适应”的核心不在 CSS，而在 JS 检测
所谓“只在内容超长时显示”，CSS 单独做不到。必须靠 JS 判断：element.scrollHeight > element.clientHeight，再动态加类：
if (el.scrollHeight > el.clientHeight) {
el.classList.add('has-overflow');
}
然后 CSS 写：
.has-overflow::after { content: "阅读更多"; /* 样式 */ }
注意：不要监听 resize 或 fontload 后反复重算——DOM 渲染完成后再执行一次即可；移动端触发点需考虑 font-size 缩放、系统字体设置等变量，简单判断比复杂监听更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
