最可靠的方式是控制容器宽度配合离散步进。需设置overflow:hidden、white-space:nowrap，steps()值等于字符数，宽度用ch单位，字体用等宽，光标用opacity动画独立控制，多行或响应式场景须JS预处理。
用 width + steps() 实现单行逐字动画
纯 CSS 打字机动画最可靠的方式是控制容器宽度，配合离散步进。关键不是让每个字符独立动，而是让整个文本块“被逐渐拉出来”。
-
overflow: hidden必须加在容器上，否则文字会直接全部显示 -
white-space: nowrap防止换行打断动画节奏，多行文本得拆成多个独立容器 -
animation: typing 2s steps(12, end) forwards中的12必须等于实际字符数（含空格、标点），少一位就漏字，多一位就卡住 - 终点宽度别用
100%或max-content—— 响应式下会失效，推荐用12ch（假设 12 字）或 JS 注入精确像素值 - 字体必须是等宽的，比如
font-family: monospace；非等宽字体下ch单位不准，中文尤其容易错位
::after 光标不能参与打字逻辑
很多人误以为光标和文字是一起动画的，其实不是。::after 只负责闪烁，不控制显示节奏。
- 不要给
::after的content写字符串序列（如"H" / "He" / "Hel"），CSS 不支持content属性动画 - 光标推荐用
border-right或伪元素 +opacity动画，例如：@keyframes blink-caret { 50% { opacity: 0; } } - 光标动画时长建议 ≥ 0.5s，太快人眼难识别，太慢显得呆滞；且要和打字动画时长解耦，避免同步卡顿
- 如果容器用了
vertical-align: middle或line-height不匹配，光标容易上下偏移，需用margin-top或transform: translateY()微调
多行、动态或响应式场景必须用 JS 预处理
CSS 本身无法统计字符数、无法自动换行判断、也无法根据屏幕宽度重算 steps() 数量。这些地方硬套纯 CSS 会出问题。
- 每行文本需包裹独立容器，并手动设置不同
animation-delay错开打字起始时间 - 中文混合英文、emoji 或全角标点时，
length计算要小心 —— JavaScript 的.length对大部分 Unicode 是准确的，但某些组合字符需用Array.from(str).length - 响应式设计中，若容器宽度随屏幕变化，
ch值可能失准，此时更适合用 JS 动态计算并写入style.width和animation的steps()参数 - 需要逗号/句号后停顿、或中途擦除重打？CSS 无条件逻辑，只能拆成多个
@keyframes段落 + 多个animation声明，维护成本高，不如交由 JS 控制
别用 clip-path 或 opacity 模拟逐字效果
看似能“逐字”控制，实则容易翻车。
立即学习“前端免费学习笔记（深入）”；
-
clip-path: inset(0 100% 0 0)配合steps()看似可行，但 Safari 对clip-path动画支持不稳定，且无法精准对齐字符边界 - 用
opacity+span包裹每个字符再设animation-delay，虽视觉上更“真实”，但：① HTML 结构污染严重；② 大量 DOM 节点影响渲染性能；③ 屏幕阅读器会逐字朗读，无障碍体验变差 - 用
width动画虽然“假打字”，但语义干净、性能好、兼容性强，95% 场景下就是最优解
