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

黄舟
Release: 2017-07-26 14:34:34
Original
2005 people have browsed it

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

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

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

Convert each word to uppercase

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

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

Convert each word to lowercase
Detailed example of how to use text-transform in CSS to convert letter cases

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template