First lowercase the text then capitalize it. Is it possible with CSS?

Question

First lowercase the text then capitalize it. Is it possible with CSS?

Edit: Example: HELLO WORLD -> Hello World

Edit2: I have a list of countries which are all uppercase, like UNITED KINGDOM, I have to make it look like United Kingdom.

Answer 1

Yep:

.className {
    text-transform:capitalize;
}

Javascript:

function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

Stolen from here: Capitalize words in string

Answer 2

This can be done if the text inside the element is only on one line, using the ::first-line pseudo-element:

<h3>HELLO WORLD</h3>
<style>
    h3 {
        text-transform: lowercase;
    }

    h3::first-line {
        text-transform: capitalize;
    }
</style>

Answer 3

I not have permission to comment, so I'll write my experience as an answer.

I have a problem with accentuated chars, solved puting '^' in the begin of regex and iterate each word of the text.

'^' indicates to match only the first char of word.

function captalize(s) {
    return s.toLowerCase().replace( /^\b./g, function(a){ return a.toUpperCase(); } );
}

var words = exampleText.split(" ");

jQuery.each(words, function(index, value) {
       var w = capitalize(value);
       exampleText.append(w).append(" ");
});

Answer 4

The best solution for me was to apply .toLocaleLowerCase() in Javascript and then use the CSS text-transform: capitalize;.

This way, all the first letters are uppercase. I wish we could achieve that with pure CSS only.