逐字显示动画应使用keyframes配合ch单位控制width裁剪，需设等宽字体、overflow:hidden，伪元素承载文本并动态注入长度，避免中英文混排错位与响应式失效。
用 keyframes + ch 单位控制逐字显示节奏
逐字动画本质是让文字“一个字一个字露出来”，不是靠 JS 拆字符串插入，而是用 CSS 的 width 配合 ch 单位做裁剪。每个中文/英文字符在等宽字体下大致占 1 ch 宽度，所以动画终点设为 width: Nch（N 是字数）最稳。
常见错误是直接用 % 或固定 px，结果中英文混排时错位、换行后失效、或字号缩放时动画长度失准。
- 必须给容器设
font-family: monospace或已知等宽字体（如"SF Mono", "SFMono-Regular", Consolas, monospace） - 容器需
overflow: hidden，否则文字会撑开容器提前全显 - 动画时长建议按字符数线性计算，比如 20 字配
2s，即0.1s/char，太快看不清，太慢像卡顿
避免 white-space: nowrap 导致的布局断裂
为了确保文字不换行、ch 计算有效，很多人加 white-space: nowrap，但这会让长文本溢出容器且无法响应式折行——移动端直接消失一半。
正确做法是：保留正常换行，但把动画作用在伪元素上，真内容仍可流式布局。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
::before伪元素承载文字，并设content: attr(data-text) - 真 DOM 里只留空标签，文本走
data-text属性，方便 JS 动态更新也不触发重排 - 伪元素设
display: inline-block; overflow: hidden;，宽度从0ch动画到attr(data-len ch)（需配合 JS 注入长度，或用 CSSch近似估算）
JS 辅助注入字符数时别硬写 textContent.length
直接用 el.textContent.length 算长度看似简单，但遇到空格、全角标点、Emoji、ZWJ 序列（比如 ??）就会严重偏高——这些字符在等宽渲染中未必占 1 ch，甚至不占视觉宽度。
更靠谱的做法是用 canvas 测量真实渲染宽度再反推字符数，但成本高；日常项目中推荐保守策略：
- 对纯中英文+数字文本，用
text.replace(/[^\u4e00-\u9fa5a-z0-9]/g, '').length去掉符号后估算 - 如果文本可控（如运营配置项），直接让后台返回预估
ch长度字段，前端只读不用算 - 若必须动态支持 Emoji，改用
Array.from(text).length（比.length更准），但依然不能替代ch单位裁剪
IE 不支持 ch？那就退到 em + 字体度量补偿
IE11 及更早版本不支持 ch 单位，但强行用 em 会因字体比例浮动导致动画错位。稳妥的降级方式不是放弃动画，而是换思路：用 clip-path 裁剪。
- 对 IE，用
clip-path: inset(0 100% 0 0)初始隐藏全部，动画改为inset(0 0 0 0) - 注意 IE 不支持
clip-path的inset()，得用 SVG<clippath></clippath>引用，或干脆用transform: scaleX(0)+origin: left - 现代浏览器中
clip-path方案反而更稳定（不受字体等宽限制），只是动画曲线需调成steps(N, end)才有“逐字”感，否则是平滑拉伸
width 或 clip-path 值必须保持终态，否则鼠标划过、焦点切换可能触发回弹；CSS 里记得加 animation-fill-mode: forwards。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
