If the label text itself in the uppercase how to change a label text to the capitalize?

Question

If the label text itself in the uppercase how to change a label text to the capitalize.

I tried this.

<p class="capitalize">THIS IS SOME TEXT.</p>

I have added

p.capitalize {
text-transform: capitalize;
}

I am getting the value as THIS IS SOME TEXT instead of This Is Some Text. There are many ways of doing this by javascript but i want to achieve this only by CSS.

Fiddle

Thanks in advance.

Answer 1

There is no way to do this.

CSS text-transform capitalize on all caps

As per link, you need to use either javascript or server side language like PHP

Answer 2

You'd need to convert the text to lowercase serverside or using javascript for the css to take effect. You may want to have a look at the MDN text-transform page.

Answer 3

p.capitalize {
  text-transform: capitalize;
}

<p class=capitalize>we love capitalizing things</p>

Options for capitalization variations are: none | capitalize | uppercase | lowercase | full-width.