text-transform: capitalize 实现英文每个单词首字母大写，仅对ASCII字母生效，按空格和标点切分单词，不改变DOM内容，中英混排时中文不受影响，且不识别驼峰命名或语法规则。
用 text-transform: capitalize 实现英文首字母大写
直接给 <p> 元素加 CSS 属性 text-transform: capitalize 就能实现每个单词首字母大写。它对纯英文段落有效，但要注意：它作用于「每个单词」，不是只处理第一个字母。
常见错误是以为它只大写段落开头的字母——其实不是。比如 "hello world" 会变成 "Hello World"，而不是 "Hello world"。
- 仅对字母生效，数字、标点、空格不受影响
- 对中文、日文等非拉丁文字无效果（不会“首字大写”，也不会报错）
- 大小写转换发生在渲染层，DOM 中文本内容不变，
innerHTML读取仍是原始小写
capitalize 和 uppercase 的区别必须分清
text-transform: uppercase 是全部转大写，而 capitalize 只让每个单词首字母大写、其余字母小写。这点容易混淆，尤其当英文混有专有名词时：
原始文本："the iPhone is from APPLE"
立即学习“前端免费学习笔记（深入）”；
capitalize → "The Iphone Is From Apple"（注意：iPhone 被拆成 Iphone，因为 iPhone 中的 P 不被视为单词首字母）
uppercase → "THE IPHONE IS FROM APPLE"
-
capitalize按空格和标点切分“单词”，不识别驼峰命名（如iPhone、XMLParser） - 如果需要保留驼峰或特定大小写，不能依赖 CSS，得用 JS 预处理字符串
- 对带连字符的词（如
multi-word），capitalize会让multi和word各自首字母大写 →Multi-Word
遇到中文混排时 capitalize 会失效吗？
不会报错，但也不起作用。CSS 的 text-transform 对中文、日文、韩文等没有定义行为，浏览器通常直接忽略。所以 <p>你好 world</p> 加了 capitalize，结果仍是 你好 world，world 首字母正常大写，你好 不变。
- 中英混排时，只有连续的 ASCII 字母会被识别为“单词”并应用
capitalize - 全角空格、中文标点（如、。！）无法触发单词分割，可能导致后续英文不被识别为独立单词
- 若需中文首字大写（如标题排版），必须用 JS 提取首字符手动处理，CSS 无解
要不要用 JavaScript 替代？什么情况下值得上 JS
纯 CSS capitalize 足够应对大多数英文段落场景；但如果你需要精确控制——比如只大写第一个单词、保留缩写（USA 不变成 Usa）、或处理带撇号的词（don't → Don't），就得用 JS。
简单示例（只大写首单词）：
const p = document.querySelector('p');
p.textContent = p.textContent.replace(/^(\w+)/, (match, word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
- 正则
/^(\w+)/只匹配开头第一个单词，避免影响后续内容 - 注意：直接改
textContent会清空子元素（如<em>、链接），如有内联标签，得遍历文本节点操作 - 服务端渲染或静态 HTML 场景下，优先用 CSS；动态生成或需语义化处理时，JS 更可控
text-transform: capitalize 能快速解决问题，但别指望它理解英文语法——它只是机械地按空格切分、首字母升格。真正复杂的格式需求，CSS 做不到，得靠 JS 补位。 
