Solution 1 :

div.c {
  text-transform: capitalize;
<h2>text-transform: capitalize:</h2>
<div class="c">Hi THis is TEST teXT</div>


Try this.

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:

text-transform: capitalize;

Another option is :

{{ textToBeConverted | uppercase }}

Thanks !

Solution 4 :

Angular has a inbuilt pipe for this

{{name | titlecase}}


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?


Comment posted by

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


Comment posted by Sahin

it is not fixed my scenario.

Comment posted by…


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.