text-transform: capitalize 仅对空格等分隔符划分的单词首字母大写，不改变dom值，对驼峰、下划线命名无效，且不转换其余字母大小写；::first-letter无法替代，因只作用于首字符且忽略text-transform；复杂场景需js实现可靠title case。
text-transform: capitalize 确实能让每个单词首字母大写，但它不是“首字母大写”的万能解——它只改显示，不改 DOM 值；它对非空格分隔的单词（如 helloWorld、user_id）完全无效；它还会把已有大写字母强行“重算”，比如 iPhone 可能变成 Iphone。
text-transform: capitalize 的真实行为
这个声明作用于整个元素文本内容，浏览器按空格、连字符、撇号等分词边界切分单词，然后把每个单词的**第一个字母转为大写**，其余字母保持原样（不强制小写）。这意味着：
-
"the quick brown fox"→"The Quick Brown Fox" -
"HELLO world"→"HELLO World"（注意：HELLO 没变小写） -
"user_id"→"User_id"（下划线后不算新单词，id不被识别为独立单词） -
"iPhone"→"IPhone"（I被视为一个单词，P是第二个单词首字母？实际表现因浏览器而异，但肯定不是你想要的）
为什么不能用 ::first-letter 替代 capitalize
::first-letter 只选中元素的第一个字符（不是第一个“字母”，而是第一个渲染字符），它不参与分词逻辑，也无法批量处理多个单词。更重要的是：
-
::first-letter上设置text-transform: uppercase会被浏览器静默忽略 - 它无法控制后续单词，所以
"hello world"用::first-letter只能大写h，w依然小写 - 若父元素用了
text-transform: lowercase，::first-letter才能视觉上“突出”首字符——但这和capitalize的目标完全不同
什么时候该放弃 CSS，改用 JavaScript
当你需要真正可靠的首字母大写（尤其涉及 API 返回、表单输入、国际化文本），CSS 的局限就暴露了。此时应交由 JS 处理原始字符串：
- 用正则或
split(' ').map(...)实现稳定 title case，比如toTitleCase("hello-world")→"Hello-World" - 注意大小写敏感场景：英文缩写（
USA）、专有名词（McDonald）、带撇号的词（O’Connor）需额外规则 - React/Vue 中建议在数据层转换，而非依赖 CSS 渲染——否则复制粘贴文本会漏掉大小写信息
- 如果只是展示用且文本格式干净（纯空格分隔、无混合 casing），
text-transform: capitalize仍是最轻量选择
真正麻烦的从来不是加一行 CSS，而是当设计师说“标题要首字母大写”，而你发现后端返回的是 "api_response_data" 或 "iOS version" ——这时候，capitalize 已经在默默失效了。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
