CSS的text-transform属性是专门用来控制文本大小写转换的样式属性，它不需要修改HTML里的文本内容，仅通过样式设置就能实现不同的文字大小写展示效果，在统一页面文本格式时非常实用。
text-transform属性的可选值
text-transform属性有多个可选取值，每个取值对应不同的大小写转换规则，具体如下表所示：
| 取值 | 说明 |
|---|---|
| none | 默认值，不进行任何大小写转换，文本保持原本的书写格式 |
| capitalize | 将每个单词的首字母转换为大写，其余字母保持原样 |
| uppercase | 将文本中的所有字母转换为大写 |
| lowercase | 将文本中的所有字母转换为小写 |
| full-width | 将文本中的所有字符转换为全角形式，部分场景下可用于统一字符宽度 |
不同取值的实际效果演示
下面通过具体的代码示例展示不同取值的实际渲染效果，基础HTML结构如下：
<div class="text-demo"> <p class="none">hello world, this is a test</p> <p class="capitalize">hello world, this is a test</p> <p class="uppercase">hello world, this is a test</p> <p class="lowercase">HELLO WORLD, THIS IS A TEST</p> </div>
对应的CSS样式代码如下：
.text-demo p {
margin: 8px 0;
font-size: 16px;
}
.none {
text-transform: none;
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
上述代码渲染后，四个<p>标签的内容分别会显示为：
- none对应：hello world, this is a test（保持原样）
- capitalize对应：Hello World, This Is A Test（每个单词首字母大写）
- uppercase对应：HELLO WORLD, THIS IS A TEST（全大写）
- lowercase对应：hello world, this is a test（全小写）
使用注意事项
在使用text-transform属性时，有几个细节需要注意：
- capitalize只会转换每个单词的首字母，单词中间的大写字母不会被强制转为小写，比如原本是<code>hELLo</code>，转换后会变成<code>HELLo</code>
- 这个属性只影响文本的视觉展示，不会改变DOM里的实际文本内容，通过JavaScript获取元素文本时拿到的还是原始内容
- 对于中文、日文等非拉丁字母文字，text-transform的大部分取值不会产生明显效果，只有full-width可能会将字符转为全角形式
实际应用场景
这个属性在以下场景中非常实用：
- 统一导航栏、按钮上的文字格式，比如要求所有按钮文字全大写，直接给按钮元素设置<code>text-transform: uppercase</code>即可，不需要逐个修改按钮文本
- 文章标题要求首字母大写时，给标题元素设置<code>text-transform: capitalize</code>，即使后台返回的内容是小写也能正确展示
- 表单输入框的提示文字需要统一大小写时，不需要修改提示文案，直接通过样式控制即可
CSStext_transform文字大小写前端样式修改时间：2026-07-18 14:33:21