Detailed example of how to use text-transform in CSS to convert letter cases

In the past, we used JS to implement the capitalization of the first letter of letters, but now it is no longer necessary. CSS can completely implement it. Fortunately, the compatibility has been supported since IE6.

text-transform：none|capitalize|uppercase|lowercase

none：

No transformation

capitalize：

Change each Convert the first letter of a word to uppercase

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

uppercase:

Convert each word to uppercase

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

lowercase:

Convert each word to lowercase

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

It’s so simple that it’s hard to say much.

The above is the detailed content of Detailed example of how to use text-transform in CSS to convert letter cases. For more information, please follow other related articles on the PHP Chinese website!