uppercase对中文无效是因CSS规范仅处理Unicode定义了大写映射的字符，汉字等无大小写概念，故不转换；验证需复制粘贴纯文本或检查DevTools计算样式。
uppercase 类能实现英文字符转大写，但对中文、日文、韩文等完全无效——这不是 bug，是 CSS 规范本身的行为。
为什么 uppercase 对中文没反应
CSS 的 text-transform: uppercase 只作用于 Unicode 中定义为“大写映射”的字符，比如 ASCII 字母 a–z、带重音的拉丁字母（é→É）、部分希腊字母等。汉字、平假名、谚文等没有大小写概念，Unicode 里也没有对应的大写码位，所以浏览器直接跳过转换。
常见误判场景：
- 写了
class="uppercase"，但文本是“张三”或“こんにちは”，结果毫无变化 - 中英文混排时只看到“STATUS”变大写，“状态”原样不动，误以为样式没生效
- 复制粘贴后发现中文仍是原样、英文已大写，误以为是渲染问题
如何确认 uppercase 真正起效了
别只靠眼睛看，用实际行为验证：
立即学习“前端免费学习笔记（深入）”；
- 选中文字 → 右键复制 → 粘贴到纯文本编辑器（如记事本），检查是否为大写英文
- 在 DevTools 的 Elements 面板中，鼠标悬停目标元素，看 computed 样式里
text-transform是否为uppercase - 检查是否有更高优先级的规则覆盖，比如父级设置了
text-transform: none，或某处写了!important的lowercase
响应式写法如 md:uppercase 要注意：它只在中屏及以上生效，小屏下默认回退到无转换，容易被忽略。
uppercase 和 capitalize 别混用错场景
两者语义和效果差异明显，选错会破坏可读性或信息层级：
-
uppercase：全字母大写，视觉强势，适合按钮标签（Submit→SUBMIT）、状态 badge（active→ACTIVE）、短标题 -
capitalize：仅单词首字母大写，其余小写，适合文章标题（how to use tailwind→How To Use Tailwind） - 误用
capitalize处理缩写词会出错：输入http status→ 输出Http Status（H和S大写，但ttp小写），不是预期的HTTP STATUS
如果需要缩写全大写 + 单词首字母大写混合（如 HTTP Status Code），uppercase 和 capitalize 都无法直接满足，得靠 JS 预处理或服务端模板逻辑。
想让中文也“看起来像大写”？绕不开的现实限制
CSS 没有“中文大写”转换机制，所谓“全角大写”其实是字体设计或排版约定（如“ＡＢＣ”是全角字符，不是“ABC”的变形）。真要模拟，只能：
- 手动替换为全角 ASCII 字符（
A→Ａ），但复制出来就是全角，且不适用于中文本身 - 用
font-variant-caps: all-small-caps（需字体支持），但它对中文无效，且兼容性有限（Safari 14+、Chrome 87+） - 接受事实：中文不需要也不应该被“转大写”，设计上用字号、字重、颜色区分层级更合理
最常被忽略的一点：哪怕你只处理英文，也要留意 uppercase 会影响辅助技术（如屏幕阅读器）对单词边界的识别——某些语音引擎会把 SUBMIT 读成单个音节，而非 “sub-mit”。关键操作类文案建议保留原始大小写，靠字体粗细和颜色强调即可。
