text-transform: uppercase 仅视觉转换，不改变 DOM 原始值；支持多数文本元素，但 input/textarea/select option/svg text 有兼容性限制；对中英文混排只影响英文字母；capitalize 浏览器实现不一致，建议 JS 处理。
text-transform: uppercase 能不能真正“转换”英文大小写
不能。它只改变视觉渲染，不修改 DOM 中的原始文本值。比如 <p style="text-transform: uppercase;">hello world</p> 页面显示为 HELLO WORLD，但 document.querySelector('p').textContent 仍返回 "hello world"，复制粘贴出来也是小写。
这意味着：表单提交、JS 字符串比对、后端接收值，全部按原始大小写处理——如果你需要真实的大写字符串，必须用 JS 显式调用 .toUpperCase()。
哪些元素加了 text-transform: uppercase 才会生效
几乎所有含文本内容的 HTML 元素都支持，包括：p、div、span、h1–h6、button、label、figcaption 等。
但要注意这些例外：
立即学习“前端免费学习笔记（深入）”；
-
input和textarea虽然能渲染出大写效果，但input.value和textarea.value始终保持用户输入原样，校验或提交时极易出错 -
select的option在旧版 Safari（≤15.6）中不支持该属性，不要依赖它做统一展示 -
svg <text>标签完全无视text-transform，得靠 JS 或服务端预处理
text-transform: uppercase 对中英文混排的实际影响
它只作用于有大小写概念的字符：ASCII 字母 A–Z、部分拉丁扩展（如 é、ñ、ç），对中文、日文、阿拉伯数字、标点符号完全无效。
例如：<p style="text-transform: uppercase;">Hello 张三 API-2024!</p> 渲染结果是 HELLO 张三 API-2024!——英文和字母缩写变了，其余原封不动。
常见误判点：
- “zhang san” → 显示为 “ZHANG SAN”，没问题；但 “张三” 不变，“zhāng sān” 中的声调符号也不会被忽略或转义
- 某些中文字体自带的英文字形 baseline 偏低，全大写后可能视觉下沉，需配合
letter-spacing或微调font-size - 别和
font-variant-caps: all-small-caps混用：后者调用字体内置小型大写字形，不是 Unicode 码位映射，复制出来仍是小写
为什么 capitalize 在不同浏览器里表现不一致
因为 CSS 规范没明确定义“单词”的切分逻辑。text-transform: capitalize 本意是让每个单词首字母大写，但浏览器对连字符、撇号、数字混合等情况的解析不同。
例如 “text-transform”：
- Chrome 把它当一个单词 → “Text-Transform”
- Firefox 按连字符切分 → “Text-transform”
这种差异在带数字或特殊符号的场景更明显（如 “user-id-2024”、“O’Reilly”）。如果对格式一致性要求高，别依赖 capitalize，改用 JS 正则或后端处理更可靠。
