Why Doesn\'t `text-transform: capitalize` Work on All-Caps Text?

CSS text-transform: capitalize not working on all caps

In this scenario, the objective is to capitalize the first letter of each word in the text when the text is provided in all caps. However, applying text-transform: capitalize; to the HTML elements does not achieve the desired effect of capitalizing the first letter of each word in the all-caps text.

To resolve this issue, a slightly modified CSS approach can be adopted:

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

This CSS code employs the following techniques:

• text-transform: lowercase;: Converts all text within the .link elements to lowercase.
• text-transform: uppercase; applied to :first-letter and :first-line selectively capitalizes the first letter of each word and the first line of the text, respectively.

By applying these styles, the desired output is achieved:

Small Caps
All Caps

The above is the detailed content of Why Doesn\'t `text-transform: capitalize` Work on All-Caps Text?. For more information, please follow other related articles on the PHP Chinese website!