7

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.

ilhan
  • 8,311
  • 31
  • 114
  • 194

3 Answers3

4

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

Community
  • 1
  • 1
Myles Gray
  • 8,429
  • 7
  • 47
  • 69
  • 10
    "ThIs is some RANDOM text!" becomes "ThIs Is Some RANDOM Text!"... I believe he wants it to become "This Is Some Random Text!" if I'm not mistaken. – animuson Mar 12 '11 at 00:56
1

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(" ");
});
Zack Stone
  • 551
  • 1
  • 10
  • 19
1

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>
pcpie
  • 21
  • 1