text-transform: uppercase仅改变英文字符的视觉渲染为大写，不修改DOM原始值，对中文、数字、标点无效；适用于p、div、span等文本元素，禁用于input/textarea等需数据一致性的场景。
text-transform: uppercase 能让英文字符“看起来”全大写，但它不改原始值，也不影响中文、数字、标点——这点不确认清楚，后续八成会踩坑。
哪些元素加了 text-transform: uppercase 才真生效
几乎所有含文本的块级/内联元素都支持：p、div、span、h1–h6、button、label、figcaption 等。但注意：
-
input和textarea虽然能渲染出大写效果，但用户输入仍是小写，input.value不变，后端收到的也是原始大小写，极易导致校验失败 -
select的option在旧版 Safari 中不支持该属性，别依赖它做统一展示 -
svg里的<text>标签完全不识别text-transform，得用 JS 或服务端预处理
text-transform: uppercase 对中英文混排的实际表现
它只作用于有大小写概念的字符（主要是 ASCII 字母 A–Z 和部分拉丁扩展如 é、ñ），对中文、日文、阿拉伯数字、标点符号完全无效。比如：
<p style="text-transform: uppercase;">Hello 张三 API-2024</p>
渲染结果是：HELLO 张三 API-2024 —— 英文和字母缩写变了，中文和数字原样不动。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
常见误判点：
- 以为加了就能让“zhang san”变成“ZHANG SAN”，确实可以；但“张三”不会变，“zhāng sān”里的声调符号也不会被忽略或转换
- 某些中文字体自带的英文字形本身偏小或 baseline 偏低，全大写后可能视觉上显得拥挤或下沉，需配合
letter-spacing或font-size微调
为什么复制粘贴还是小写？这正常吗
完全正常。text-transform 是纯渲染层控制，不影响 DOM 实际内容。以下行为全部保持原始大小写：
-
document.querySelector('p').textContent返回的仍是小写字符串 - 用户选中文字复制 → 粘贴出来是 “hello world”，不是 “HELLO WORLD”
- 表单提交时，
input.value或textarea.value不受样式影响 - 屏幕阅读器读取的是原始文本，不是渲染后的
如果你需要复制/提交/比对时也用大写，必须用 JavaScript：el.textContent = el.textContent.toUpperCase() 或在表单提交前处理 input.value。
别和 font-variant-caps: all-small-caps 搞混
text-transform: uppercase 是把字符映射为大写 Unicode 码位（a → A），复制出来就是大写；而 font-variant-caps: all-small-caps 是调用字体里预置的“小型大写字母”字形，不改变字符本身，复制出来仍是小写。
关键差异：
-
text-transform: uppercase兼容 IE6+，稳如老狗 -
font-variant-caps在 Safari 14+、Chrome 87+ 才稳定支持，且依赖字体是否提供 small-caps 字形 - 如果目标是“让复制出来的文本也是大写”，只能选
text-transform；如果追求更协调的字号与字重（比如避免大写字母突然变粗变高），且兼容性可控，才考虑后者
真正容易被忽略的，是那个“继承性”：它默认会往下透传。比如给 div.upper 设了 text-transform: uppercase，里面所有子元素文本都会变大写——除非你显式写 span.normal { text-transform: none; } 来打断。
