用CSS text-transform转换字母大小写

时间:2025-01-01 20:07:44

以前我们都是用JS来实现字母的首字母大小写的,但现在没有必要了,CSS完全可以实现,话说兼容性还好从IE6开始就支持了。

text-transform:none | capitalize | uppercase | lowercase

none:

无转换

capitalize:

将每个单词的第一个字母转换成大写

用CSS text-transform转换字母大小写

<style>
#box{
text-transform:capitalize;
}
</style>
<div id="box">css javascript html5</div>
uppercase:

将每个单词转换成大写

用CSS text-transform转换字母大小写

#box{
text-transform:uppercase;
}
<div id="box">css javascript html5</div>
lowercase:

将每个单词转换成小写

用CSS text-transform转换字母大小写

#box{
text-transform:lowercase;
}
<div id="box">CSS JAVASCRIPT HTML5</div>

实在是太简单了,都不好多说什么。