text-transform: capitalize 仅对每个单词首字母大写，而非句首；它按空格/标点切分单词，不识别语法结构，对中文等无空格语言基本无效，实现句首大写需JS或HTML手动包裹。
text-transform: capitalize 只作用于单词首字母，不是句子首字母
很多人以为 text-transform: capitalize 能让整段文字的**第一个字母大写**，结果发现每个单词开头都被转大写了。这是因为它的设计逻辑是按空格/标点切分“单词”，对每个单词的首字符执行大写转换，和英文标题格式（Title Case）行为一致。
常见错误现象：
text-transform: capitalize;应用于
"hello world! how are you?" → 渲染为 "Hello World! How Are You?"，而非预期的 "Hello world! how are you?"
- 它不识别语法结构（如感叹号后是否新句子），也不区分专有名词或缩写
- 对中文、日文等无空格分词的语言基本无效（浏览器通常无“单词”概念，可能全转为大写或无变化）
- 对带连字符的单词（如
"self-contained"）会把"self"和"contained"分别首字母大写
想只让句首大写？不能只靠 CSS，得结合 JS 或 HTML 结构
CSS 本身没有 first-letter-of-sentence 这类选择器。若必须实现“仅第一字符大写”，有两类实操路径：
- 用
手动包裹首字符，再单独设置text-transform: uppercase或font-variant-caps: small-caps - 用 JavaScript 提取字符串首字符并替换，例如：
const el = document.querySelector('.intro');
if (el.textContent) {
const text = el.textContent;
el.innerHTML = `${text[0]}${text.slice(1)}`;
} - 服务端渲染时提前处理（如模板中用
{{ content|capitalize_first }}），避免前端 JS 干预
注意：JS 方案需考虑 DOM 更新时机（比如内容由框架动态插入），否则可能失效。
立即学习“前端免费学习笔记（深入）”；
text-transform 其他值的实际表现差异
text-transform 的几个常用值在真实项目中容易混淆，尤其涉及大小写转换与表单输入：
-
uppercase：全部转大写，但只是视觉效果——input值提交时仍是原始大小写；适合标签、按钮文字统一风格 -
lowercase：同理，不影响实际值；可用于邮箱提示文案，但不能替代后端校验 -
none：显式重置继承值，比不写更可靠（尤其在组件库覆盖样式时） -
inherit：慎用，可能意外放大父级的capitalize效果（子元素也逐词首字母大写）
性能上无差异，但过度嵌套使用可能增加渲染树计算负担（极小，一般可忽略）。
兼容性没问题，但要注意 font-variant-caps 更精细的控制
text-transform 在所有现代浏览器（包括 IE9+）都稳定支持，无需前缀。真正容易被忽略的是它和 font-variant-caps 的分工：
-
text-transform改变的是**文本内容的呈现形态**（本质是映射 Unicode 大小写） -
font-variant-caps: all-small-caps等则调用字体内置的**小型大写字母字形**（如果字体支持），视觉更协调、行高更自然 - 二者可叠加，但优先级不同：先应用
text-transform，再由font-variant-caps选字形
所以如果你在做品牌文案排版，且字体明确支持小型大写（如 "Inter", "IBM Plex Sans"），优先用 font-variant-caps 替代 text-transform: uppercase。
