纯css打字效果仅适用于静态单行等宽文本；动态内容、换行、中英文混排或交互控制必须用js实现。
纯 CSS 打字效果能做，但只适用于静态、单行、字符数已知的文本；一旦涉及换行、中文宽度不均、动态内容或交互控制，就必须补 JS。
为什么 steps() 动画必须配合等宽字体和固定字符数
CSS 的 steps(n, end) 把动画切成 n 个“瞬跳”帧，每帧显示一个字符——前提是所有字符视觉宽度一致，否则跳得错位。非等宽字体（如 system-ui）里“我”比“i”宽近两倍，width: 100% 拉伸时无法对齐字符边界。
-
font-family必须设为monospace或明确指定等宽字体，例如'Fira Code', 'SFMono-Regular', monospace - 容器
width不能用100%或fit-content，得手动算字符数并设为20ch（20 个字符宽度），ch单位才真正匹配等宽字符 -
steps()的n值必须等于文本总字符数（含空格和换行符），多一个少一个都会卡住或提前结束 -
white-space: nowrap必须加，否则换行会打断 width 动画节奏，导致某行突然整行弹出
overflow: hidden + width 动画失效的常见原因
最常遇到的是动画不动、文字全显或一闪而过——根本不是代码写错，而是容器尺寸没锁死。
- 父容器没设
display: inline-block或width，导致子元素width: 0 → 100%实际是相对于父容器 100%，而非文本自身宽度 - 忘了加
overflow: hidden，文字从一开始就能看见，动画只是“拉宽边框”，毫无打字感 - 用了
animation-fill-mode: forwards但漏了forwards，动画一结束就回退到width: 0，文字消失 - Safari 旧版对
ch单位渲染不准，可临时降级用em（如12em）并配合font-size校准
中文、标点、emoji 导致打字错位怎么办
等宽字体也不能完全解决中文问题：全角标点占 2 字符宽，emoji 在不同系统渲染宽度浮动，steps() 按字符数切帧就会偏移。
- 纯 CSS 方案下，避免混用中英文和 emoji；若必须支持，改用
clip-path: inset(0 100% 0 0)替代width动画，它按像素裁剪，不受字符宽度影响 -
clip-path需搭配animation-timing-function: steps(20, start)，且初始clip-path必须写成inset(0 100% 0 0)，不能简写为inset(0) - 更稳妥的做法是放弃纯 CSS，改用 JS 拆分字符串：
Array.from(text)能正确处理 emoji 和代理对，再逐个textContent追加 - 不要用
innerHTML += char，会触发重排；优先用el.textContent = text.slice(0, i)
真正难的不是让字一个个出来，而是让光标停在最后一字符右侧、换行后自动对齐、中英文混排不跳帧——这些细节纯 CSS 控不住，得靠 JS 补位。别硬扛，该交出去的时候就交出去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
