text-transform: capitalize仅对英文等有大小写概念的字符生效，将每个单词首字母大写，其余字母不变；对中文、日文、韩文无效，且不修改dom值，仅影响渲染。
text-transform: capitalize 在中文、日文、韩文里根本不起作用
它只对有大小写概念的字符生效，比如英文 A–Z、带重音的拉丁字母（é、ñ），对汉字、假名、谚文完全无反应。你看到“张三”没变，不是样式漏了，是规范就没定义这一步——text-transform 压根不处理无大小写的文字系统。
常见误判：给含中英文的标题加 text-transform: capitalize，结果 “API response 数据” 变成 “API Response 数据”，中文部分纹丝不动。这不是 bug，是预期行为。
- 想让拼音转首字母大写？
zhang san→Zhang San可以，但张三→张三永远不变 - 混合文本如
user_id_v2会被切分成user_id_v2（下划线不触发分词），结果是User_id_v2，不是你想要的UserIdV2 - 浏览器对连字符、撇号的分词逻辑不一致：Firefox 把
O’Connor当两个单词，Chrome 可能当一个，capitalize输出结果不可控
为什么 text-transform: capitalize 在英文里也靠不住
它不改 DOM 值，只影响渲染；不保留原有大小写，而是“重算”首字母——iPhone 可能变成 IPhone 或 Iphone，取决于浏览器怎么切分“单词”。更麻烦的是，它强制其余字母小写，HELLO world → Hello World，但如果你只想大写首字母、其余保持原样（比如保留 world 的大写 W），capitalize 直接失效。
-
text-transform: capitalize的分词依据是 Unicode 字符属性和浏览器实现，没有统一标准 - 它无法识别缩写（
USA→Usa）、专有名词前缀（McDonald→Mcdonald）、带撇号的姓氏（O’Reilly→O’reilly） - 在
contenteditable或表单中使用时，用户复制粘贴出来仍是原始字符串，后端收不到大写格式
什么时候必须用 JavaScript 替代 CSS
当你需要真正可控的 title case 转换，尤其是数据要参与后续流程（提交、搜索、比对、国际化），就不能依赖 text-transform。JS 可以按规则预处理字符串，保留缩写、处理连字符、适配 locale。
- 简单场景：
"hello-world".split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('-')→"Hello-World" - 生产级需求：用
Intl.Locale或toLocaleUpperCase()处理土耳其语等特殊大小写规则 - React/Vue 中应在数据层转换（比如
computed或useMemo），而非模板里套style="text-transform: capitalize" - 注意性能：频繁调用正则或 split/map 处理长文本可能卡顿，可加 memo 或节流
多语言混排时的视觉一致性陷阱
即使你用 JS 做了正确转换，中英文混排仍可能视觉失衡：全大写的英文比汉字显得更“重”、更挤，尤其在等宽字体或小字号下。这不是大小写问题，是字体度量差异。
- 别只调
font-size，试试letter-spacing: 0.05em缓解大写字母压迫感 - 中文标题若需“首字突出”，
::first-letter可行，但它和text-transform无关，且不支持多字首字（如“人工智能”只能大写“人”） - 服务端生成 HTML 时直接输出已转换文本，比客户端 JS 更可靠，也避免 FOUC（闪屏）
api_response_data、iOS version、École Polytechnique —— 这时候，text-transform 就只是个起点，不是终点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
