How Can I Use `text-transform: capitalize` Without Affecting All-Caps Words?

Overriding CSS text-transform: Capitalize for All Caps Text

Problem:

Utilizing CSS's text-transform: capitalize; rule to convert all-caps text to sentence case renders problematic when the initial letters of such words inherently require uppercase, such as proper nouns or acronyms.

As demonstrated in the following code snippet, the desired output of "Small Caps & All Caps" is not achieved:

HTML:

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

CSS:

.link {text-transform: capitalize;}

Result:

Small Caps & ALL CAPS

Solution:

To achieve the desired capitalization behavior while maintaining the text-transform: capitalize; rule, the following CSS can be implemented:

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

This modification transforms all text to lowercase initially, then re-capitalizes the first letter of each word and the first line of text.

Result:

Small Caps
All Caps

The above is the detailed content of How Can I Use `text-transform: capitalize` Without Affecting All-Caps Words?. For more information, please follow other related articles on the PHP Chinese website!