text-transform 文本大小写转换属性

最后更新：2026-09-13

text-transform text-transform 文本大小写转换属性

text-transform 属性用于控制文本的大小写转换效果，可以在不修改原始文字内容的情况下，将文本统一显示为大写、小写或首字母大写。这个属性会保留原始文本在 HTML 中的形式，对屏幕阅读器和复制粘贴的内容没有影响，纯粹是视觉层面的转换。

text-transform: none | capitalize | uppercase | lowercase | full-width;

值	类型	描述
`none \| capitalize \| uppercase \| lowercase \| full-width`	关键字	文本大小写转换

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
text-transform	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： capitalize 会将每个单词的首字母转为大写，但对中文、日文等无大小写区分的文字没有效果。

注意： uppercase 对某些语言（如希腊语、土耳其语）有特殊的大小写规则，转换结果可能与预期不同。

Qtext-transform 会改变实际文本内容吗？

A不会。它只影响视觉呈现，DOM 和源代码中的文本保持不变，用户复制时通常复制的也是原始文本。适合做标题统一大写、按钮文字格式化等场景。

Qfull-width 有什么用途？

A把半角字符（英文字母、数字、标点）转换为全角形式，使西文在中文段落中宽度一致、视觉更整齐。常用于日文和中文排版，对已经是全角的汉字没有影响。

Qcapitalize 为什么对中文没有效果？

Acapitalize 只把每个单词的首字母转大写，中文没有单词与大小写概念，所以无效果；中英混排时只对英文部分生效。另外希腊语、土耳其语等有特殊大小写规则，结果可能和预期不同。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。