17370845950

text-transform: capitalize 仅对每个单词首字母大写，而非句首；它按空格/标点切分单词，不识别语法结构，对中文等无空格语言基本无效，实现句首大写需JS或HTML手动包裹。

text-transform: capitalize 只作用于单词首字母，不是句子首字母

很多人以为 text-transform: capitalize 能让整段文字的**第一个字母大写**，结果发现每个单词开头都被转大写了。这是因为它的设计逻辑是按空格/标点切分“单词”，对每个单词的首字符执行大写转换，和英文标题格式（Title Case）行为一致。

常见错误现象：

text-transform: capitalize;

• 它不识别语法结构（如感叹号后是否新句子），也不区分专有名词或缩写
• 对中文、日文等无空格分词的语言基本无效（浏览器通常无“单词”概念，可能全转为大写或无变化）
• 对带连字符的单词（如 "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。