How to Convert Text from Lowercase to Capitalize Using CSS?

CSS Text Transformation: Lowercase to Capitalize

Can you tweak text to transform it from lowercase to capitalize using CSS?

Understanding the Needs

Consider a scenario where you want text formatted in the following manner:

• lowercase first, then capitalize only the first letter of each word.
• Input: HELLO WORLD
• Output: Hello World

Another example might be a list of countries in all uppercase, such as: UNITED KINGDOM, which you need to convert to: United Kingdom.

CSS Implementation

Yes, CSS provides the text-transform property to achieve this. By setting it to "capitalize," you can capitalize the first letter of each word while converting the remaining characters to lowercase.

<code class="css">.className {
    text-transform: capitalize;
}</code>

This CSS rule applies to elements with the class name className, transforming their text accordingly.

Javascript Solution

Besides CSS, JavaScript can also be utilized to achieve text transformation:

<code class="javascript">function capitalize(s) {
    return s.toLowerCase().replace(/\b./g, function (a) {
        return a.toUpperCase();
    });
}

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

This function takes a string s as input, converts it to lowercase, and then uses a regular expression to identify word boundaries (b) and capitalize the first character of each identified word.

Note: Credit for the JavaScript function goes to the following resource: Capitalize words in string.

The above is the detailed content of How to Convert Text from Lowercase to Capitalize Using CSS?. For more information, please follow other related articles on the PHP Chinese website!