content属性仅作用于伪元素，无法读取或替换真实文本内容，真截断需用text-overflow、white-space和overflow组合，::after加省略号仅为视觉补救。
不能直接用 content 属性截断或替换“多余文字”——它只对伪元素生效，且不读取真实文本内容。 你看到的“用 ::after 显示省略号”是视觉补救，不是内容替换。真要隐藏/替换溢出文字，得靠 text-overflow + white-space + overflow 组合，content 只能锦上添花。
为什么 content 无法获取或修改真实文本内容
content 是伪元素的“生成内容”，它完全独立于 DOM 文本节点。哪怕你写 ::after { content: "⚠"; }，它也不会知道前面的 p 里有没有超出两行、有没有“多余”字——它只是机械地在末尾加一个符号。
- 伪元素没有访问父元素文本长度、截断位置或 DOM 结构的能力
-
content: attr(data-truncated)只能读取 HTML 属性值，不能动态计算是否溢出 - 浏览器不提供类似
content: "…" if overflow的条件语法
真正控制“多余文字显示为符号”的组合方案
必须用 CSS 布局约束 + 视觉提示配合，content 仅用于增强（比如加图标）。核心是三属性联动：
-
white-space: nowrap（单行）或display: -webkit-box; -webkit-line-clamp: 2（多行） -
overflow: hidden（强制裁剪） -
text-overflow: ellipsis（单行时显示…；多行需额外 hack） - 若想把
…换成自定义符号（如»），只能用 JavaScript 测量并手动截断+拼接，content无法替代
用 ::after 添加自定义符号的典型误区
常见错误写法：p { text-overflow: clip; } p::after { content: "◆"; }——这会在所有段落末尾无条件加 ◆，不管有没有溢出。
- 正确做法是：先确保父容器有
position: relative，再给::after定位到右下角，并用pointer-events: none避免遮挡文字 - 符号颜色/大小需与省略号视觉统一，否则显得割裂（比如
text-overflow: ellipsis是灰色小点，::after却是红色大三角） - 响应式场景下，符号可能错位——因为
::after的right值是静态的，而文字宽度随屏幕变化
JavaScript 辅助实现“多余文字 → 自定义符号”的最小可行路径
如果非要用 ✦ 替代 …，且必须纯前端，就得放弃纯 CSS 方案：
- 监听容器
offsetWidth与scrollWidth，判断是否溢出 - 用
textContent截取前 N 个字符，再拼接"✦" - 避免在
resize中高频重算——节流到 100ms 以上 - 注意中英文混排时，一个汉字 ≈ 两个英文字符宽度，单纯按字符数截取会不准
复杂点在于：这个逻辑无法封装进 CSS，每次 DOM 更新都得重新检查。容易被忽略的是字体加载延迟——font-display: swap 下，初版渲染可能误判溢出状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
