如何使用css中text-transform转换字母大小写的示例详解

黄舟
Lepaskan: 2017-07-26 14:34:34
asal
2023 orang telah melayarinya

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

text-transform:none | capitalize | uppercase | lowercase

none:

无转换

capitalize:

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

如何使用css中text-transform转换字母大小写的示例详解

<style>
  #box{
    text-transform:capitalize;
  }
</style>
<p id="box">css javascript html5</p>
Salin selepas log masuk
uppercase:

将每个单词转换成大写

如何使用css中text-transform转换字母大小写的示例详解

#box{
  text-transform:uppercase;
}
<p id="box">css javascript html5</p>
Salin selepas log masuk
lowercase:

将每个单词转换成小写
如何使用css中text-transform转换字母大小写的示例详解

#box{
  text-transform:lowercase;
}
<p id="box">CSS JAVASCRIPT HTML5</p>
Salin selepas log masuk

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

Atas ialah kandungan terperinci 如何使用css中text-transform转换字母大小写的示例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan