在前端页面开发中，文字的大小写格式调整是常见需求，比如导航栏标题统一大写、表单提示文字首字母大写等场景，都可以通过css的text-transform属性实现，无需修改文本本身的内容。
text-transform属性基础说明
text-transform是css中用于控制文本大小写转换的属性，它作用于块级或行内元素的文本内容，不会改变DOM中实际的文本值，仅影响视觉展示效果。该属性有多个可选值，不同的取值对应不同的转换规则。
常用属性值介绍
- none：默认值，不进行任何大小写转换，文本保持原有书写格式。
- capitalize：将每个单词的首字母转换为大写，其余字母保持原样。
- uppercase：将文本中的所有字母转换为大写。
- lowercase：将文本中的所有字母转换为小写。
- full-width：将文本中的所有字符转换为全角形式，部分场景下可用于统一字符宽度，不过该属性值的兼容性稍弱。
属性值效果对比
为了更直观地看到不同属性值的效果，我们可以通过下面的表格进行对比：
| 属性值 | 原始文本 | 展示效果 |
|---|---|---|
| none | hello world | hello world |
| capitalize | hello world | Hello World |
| uppercase | hello world | HELLO WORLD |
| lowercase | HELLO WORLD | hello world |
实际使用示例
下面通过具体的代码示例来演示text-transform的使用方法，所有代码都可以直接复制到本地运行查看效果。
基础样式示例
首先我们准备一段基础的HTML结构，包含不同类别的文本元素：
<div class="text-demo"> <p class="original">hello css text transform</p> <p class="capitalize-text">hello css text transform</p> <p class="uppercase-text">hello css text transform</p> <p class="lowercase-text">HELLO CSS TEXT TRANSFORM</p> </div>
接下来编写对应的css样式，为不同类名的元素设置不同的text-transform属性值：
.original {
/* 默认值，无转换 */
text-transform: none;
margin-bottom: 10px;
}
.capitalize-text {
/* 每个单词首字母大写 */
text-transform: capitalize;
margin-bottom: 10px;
}
.uppercase-text {
/* 全部字母大写 */
text-transform: uppercase;
margin-bottom: 10px;
}
.lowercase-text {
/* 全部字母小写 */
text-transform: lowercase;
margin-bottom: 10px;
}
结合其他样式的使用场景
在实际开发中，text-transform经常会和其他文字样式结合使用，比如给导航栏标题设置统一的大写格式：
<ul class="nav-list"> <li><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">product</a></li> <li><a href="#">contact</a></li> </ul>
.nav-list {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
}
.nav-list li a {
text-decoration: none;
color: #333;
/* 导航文字统一大写 */
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}
.nav-list li a:hover {
color: #1890ff;
}
注意事项
使用text-transform时需要注意以下几点：
- 该属性仅影响字母的大小写转换，对数字、特殊符号不会产生作用。
- capitalize属性值是按照单词来转换首字母的，单词的分隔符通常是空格、连字符、下划线等，比如
hello-world会被转换为Hello-World。 - 如果文本本身已经是大写，设置lowercase会将其转换为小写，反之亦然，转换是基于原始文本的每个字符进行的。
- 部分小语种语言的大小写规则可能和英语不同，text-transform会遵循对应语言的规则进行转换，不过大部分场景下我们处理的是英语文本，无需额外关注。
需要注意的是，text-transform只是视觉上的转换，通过JavaScript获取元素的textContent或者innerText时，得到的仍然是原始书写的文本，不会因为样式设置而改变。
csstext-transform文字大小写前端样式修改时间：2026-07-10 06:33:26