div.c {
text-transform: capitalize;
}<html>
<body>
<h2>text-transform: capitalize:</h2>
<div class="c">Hi THis is TEST teXT</div>
</body>
</html>Try this.
Solution 1 :
Solution 2 :
In Javascript:
function titleCase(str) {
var splitStr = str.toLowerCase().split(' ');
for (var i = 0; i < splitStr.length; i++) {
// You do not need to check if i is larger than splitStr length, as your for does
that for you
// Assign it back to the array
splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
}
// Directly return the joined string
return splitStr.join(' ');
}
document.write(titleCase("I'm a little tea pot"));
Please see Capitalize First Letter Of Each Word In A String – JavaScript
Solution 3 :
You can use the following if you strictly want to do it in style.css file:
selector{
text-transform: capitalize;
}
Another option is :
{{ textToBeConverted | uppercase }}
Thanks !
Solution 4 :
Angular has a inbuilt pipe for this
{{name | titlecase}}
link
Solution 5 :
What you want is impossible using pure CSS. Please refer to this answer.
Alternative, you can use it with angular lowercase pipe and titlecase pipe:
{{ textToTransform | lowercase | titlecase }}
Problem :
My database give mixed font styles, for Example:
” Hi THis is TEST teXT “
I want to capitalization this type of fonts. I found a way, first using lowercase and then ::first-letter to be capitalized. This give the first letter only capital.
But I want capitalization in every first word, is there any way?
Comments
Comment posted by angular.io/api/common/TitleCasePipe
angular.io/api/common/TitleCasePipe
Comment posted by Sahin
I want only in style css, without using angular.
Comment posted by Maniraj Murugan
“But i want capitalization in every first word” .. First word or first letter on each word??
Comment posted by Manikandan2811
Yes its possible in css.. You can add this for example, h5 {text-transform: lowercase;}
Comment posted by edit
Please
Comment posted by Sahin
it is not fixed my scenario.
Comment posted by stackoverflow.com/questions/21827377/…
@Sahin
Comment posted by Sahin
Not working, i already checked.
Comment posted by Sahin
no java scripts only css
Comment posted by Sahin
Using css, is possible ? Please understand the scenario
Comment posted by Mukul_Vashistha
Oh I get it. Your data is in mixed form. Why don’t you use the second option using pipe {{ textToBeConverted | uppercase }}
Comment posted by Sahin
Our side is large number of data, so can’t using angular functions, bit slow, and next reason is we dont go with dev side, using client side is better to formatting.
Comment posted by Mukul_Vashistha
Honestly it isn’t so slow that it would make a difference to the user. The data rendered would not take hefty amount of time.I work with huge data set and using pipes never made a problem.
Comment posted by Sahin
Ohh ok, but we have some issues regarding this, thats why.
Comment posted by Sahin
Using angular this is a way i know, but using css i want
Comment posted by Passionate Coder
oh ok let me check
Comment posted by Sahin
with your reference link, they posted “cant do this with pure CSS”. but using angular pipe will do right. i want to try using pure css, thats why i created a new ticked.