Reputation: 8995
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
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
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
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
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