width裁剪文字常失效，因width仅对块级或inline-block元素生效，内联元素需显式设display；中文逐字显示用ch单位+steps()更可靠，可精准控制每字一帧。
animation + width 裁剪文字为什么常失效
直接用 width 配合 @keyframes 做逐字显示，多数情况下根本看不到效果——因为 width 只对块级或 inline-block 元素生效，而默认的 <span></span> 或 <p></p> 内联元素不响应 width 变化。
- 必须显式设置
display: inline-block或display: block - 容器需有明确宽度上限（比如
max-width），否则width: 0→width: 100%会撑满父容器，看不出“逐字”感 - 中文逐字显示依赖字符等宽假设，但实际中字体、标点、全角/半角混排会导致跳动，纯靠
width百分比无法精准停在每个字边界
更可靠的替代方案：ch 单位 + step-end 动画
用字符单位 ch 配合 steps() 时间函数，能真正实现“一个字一帧”，避开百分比裁剪的模糊问题。
-
ch表示“0”字符的宽度，对等宽字体较准；即使非等宽，现代浏览器对中文字符的ch计算也基本按平均字宽处理 -
animation-timing-function: steps(5, end)中的5对应文字总字数，end确保每步结束才跳下一帧 - 必须配合
overflow: hidden和固定宽度容器，否则超出部分仍可见
示例：
.typewriter {
display: inline-block;
overflow: hidden;
width: 5ch; /* 假设5个字 */
animation: typewriter 2s steps(5, end);
}
@keyframes typewriter {
from { width: 0; }
to { width: 5ch; }
}
遇到英文/数字/标点混排怎么办
混排时 ch 依然有效，但单个 ch 宽度可能小于窄字符（如 i、.），导致裁剪错位或漏字。
- 保险做法是统一用等宽字体：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace - 若必须用比例字体，改用
ch+ 字符数估算：比如 6 字字符串，设width: 6.5ch并微调steps(6, end) - 避免在动画中动态插入内容，DOM 变更会重置
animation，导致闪烁或中断
兼容性与性能注意点
ch 单位在 IE 中完全不支持，iOS Safari 9+、Chrome 47+、Firefox 41+ 支持良好；steps() 在所有现代浏览器中稳定，但旧版 Android WebView 有跳帧问题。
- 不要给大段文字（>20 字）直接套
steps(N, end)，N 过大会让 CSS 解析变慢，首帧延迟明显 - 若需服务端渲染或 SEO 友好，务必保留原始文本，仅用 CSS 控制显示，别用 JS 拆字插入
- 动画运行时持续触发 layout，频繁修改
width在低端设备上可能掉帧，优先考虑transform: scaleX()替代（但需配合origin和overflow精确控制）
逐字动画看着简单，真正稳的不是“怎么动”，而是“怎么停”——每个字的视觉停留位置，取决于单位选择、字体行为和浏览器对 steps() 的实现细节，这些地方一松手就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
