Limitations of the CSS Property text-transform: capitalize

Before we discuss the limitations of capitalize CSS property, let me first give you a brief overview of the text-transform property. This will help us understand when it is appropriate to use this property in our code, and when it might not be suitable.

Introduction to CSS Text transform property

The following are the text-transform properties :

1. lowercase: Makes all of the letters in lowercase

2. uppercase: Makes all of the letters in capital

3. capitalize: Capitalizes the first letter of each word

4. none: This is the default case. The text renders as it is.

Let's see how can we apply this property in our code:

Limitation of text transform property

As you can see it is not true in all conditions. Although the text-transform: capitalize property typically transforms the first letter of each word in a text string to uppercase, it behaves differently when applied to text in all uppercase letters. In such cases, the capitalize property fails to transform the text as expected because all the first letters of each word are already uppercase. Instead, the property simply leaves the text unchanged without modifying any of the other letters, meaning that it does not lowercase any letters in the text.

But...

Solutions

To capitalize text that is written in uppercase , you can use CSS to first transform the text to lowercase it and then apply the ::first-letter pseudo-element to capitalize the first letter of the text. However, this method only works if the text is a single line. If the text is a paragraph, then you will need to use JavaScript to achieve the desired results.

To achieve the desired solution, we must use Javascript to get the object element of the text and then use a for loop to iterate through the inner text while converting each letter to lowercase. Then, capitalize it using the text-transform: capitalize property.

Kindly review the provided solution for a better understanding:

Conclusion

The text-transform: capitalize CSS property is only effective when the text is in lowercase. If the text is in uppercase, you will need to use one of two given solutions depending on the type of text that you wish to capitalize.