transform text from uppercase to capitalize

Question

How can I transform a text from uppercase to capital case using CSS only?

For example change this text " THIS IS A TEXT. " to " This Is A Text. "

there is no way to do this in css , if your text in the html is in uppercase itself ! — Alexander Solonik, Jun 27 '18 at 09:10
@AlexanderSolonik There is a way, please take a look https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-transform — Diptee Hamdapurkar, Jun 27 '18 at 09:11
@DipteeH It doesn't work if the text is already uppercase https://jsfiddle.net/L6kxozng/ — Hidden Hobbes, Jun 27 '18 at 09:12
I don't know why people are down voting the question. It's a real struggle that CSS doesn't have a solution for this problem. — Yassine Younes, Jun 27 '18 at 09:21
Probably because this question has been asked a lot before and all the duplicates say you either need to use your server side language or js to lowercase it first — Pete, Jun 27 '18 at 09:22

score -1 · Answer 1 · answered Jun 27 '18 at 09:12

-1

With the help of text-transform css property Check details here

answered Jun 27 '18 at 09:12

Diptee Hamdapurkar

372
2
9

That doesn't work in my case. – Yassine Younes Jun 27 '18 at 09:17
@YassineYounes You can make use of js function transfer it to lower and then apply class – Diptee Hamdapurkar Jun 27 '18 at 09:23

Firefly · Answer 2 · 2018-06-27T09:20:37.673

-2

Like this. text-transform: capitalize;

EDIT: If the text is written in uppercase then it's impossible with just css.

edited Jun 27 '18 at 09:20

answered Jun 27 '18 at 09:10

Firefly

214
1
11

4

That won't work if the text is in uppercase to begin with. – Hidden Hobbes Jun 27 '18 at 09:12
@HiddenHobbes just need to override, it works: http://jsfiddle.net/apgfrmey/1/ – Firefly Jun 27 '18 at 09:15
1

Not sure what your Fiddle is trying to show but no, it doesn't work when the text is already uppercase https://jsfiddle.net/L6kxozng/ – Hidden Hobbes Jun 27 '18 at 09:17
@HiddenHobbes is right. It does not work on uppercase – vaishali kapadia Jun 27 '18 at 09:17
1

Ho by uppercase he means a text written in uppercase and not stylize in uppercase? Well, impossible :/ – Firefly Jun 27 '18 at 09:18
"text-transform: capitalize" works only when the text is initially lower case. – Yassine Younes Jun 27 '18 at 09:19
@YassineYounes then it's impossible in css only. Sorry. – Firefly Jun 27 '18 at 09:21

Mayank Agarwal · Answer 3 · 2018-06-27T11:06:19.270

-2

The text-transform property in CSS controls text case and capitalization.

.capitalize {
  text-transform: capitalize;
  }

"this is a text" "This Is A Text"

capitalize capitalizes the first letter of each word in the selected text.

It does not makes the remaining text lowercases , that is why "THIS IS A TEXT" will not change to "This Is A Text". For This:- You have to first lowercase the texts and then capitalize it.

capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that's in all capital letters already, the other letters in the word won't switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn't include any lowercase letters.

edited Jun 27 '18 at 11:06

answered Jun 27 '18 at 09:14

Mayank Agarwal

33
1
5

1

"text-transform: capitalize" works only when the text is initially lower case. – Yassine Younes Jun 27 '18 at 09:18
This is because : - capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that's in all capital letters already, the other letters in the word won't switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn't include any lowercase letters. – Mayank Agarwal Jun 27 '18 at 11:06

transform text from uppercase to capitalize

3 Answers3