CODEWITHSUNDEEP
css
ilhan
ilhan

Reputation: 8995

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

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.

Upvotes: 8

Views: 4906

Answers (4)

Enes KOC
Enes KOC

Reputation: 41

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.

Upvotes: 0

pcpie
pcpie

Reputation: 31

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>

Upvotes: 2

Zack Stone
Zack Stone

Reputation: 712

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(" ");
});

Upvotes: 1

mylesagray
mylesagray

Reputation: 8879

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

Upvotes: 3

Related Questions