How Can I Capitalize Only the First Letter of Each Word in CSS While Preserving Existing All Caps?

CSS text-transform: capitalize All Caps Dilemma

The text-transform property in CSS controls the capitalization of text. When set to "capitalize," it capitalizes the first letter of each word. However, this poses a challenge when dealing with words that are already in all caps.

The Problem

In the provided HTML and CSS snippet:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

The output is "Small Caps & ALL CAPS," whereas the desired output is "Small Caps & All Caps."

Solution

To achieve the desired result, a combination of CSS rules can be employed:

.link {
  text-transform: lowercase;
}

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

• The text-transform: lowercase rule converts all text in ".link" elements to lowercase.
• The text-transform: uppercase rule applied to the pseudo-elements :first-letter and :first-line capitalizes the first letter and first line of each element, respectively.

This approach ensures that words already in all caps (like "ALL CAPS") are preserved while still capitalizing the first letter of the other words. The resulting output will be:

Small Caps 
All Caps

The above is the detailed content of How Can I Capitalize Only the First Letter of Each Word in CSS While Preserving Existing All Caps?. For more information, please follow other related articles on the PHP Chinese website!