Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lower case all then capitalize - pure CSS [duplicate]

Tags:

I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?

But it wasn't pure CSS. I have a div that contains this text:

<div> RaWr rAwR </div> 

I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?

I tried wrapping it in another div but it didnt work:

<style>     #test3 { text-transform: lowercase; }     #test3 div { text-transform: capitalize; } </style>  <div id="test3"><div>RaWr rAwR</div></div> 
like image 477
Noitidart Avatar asked Feb 17 '14 11:02

Noitidart


People also ask

How do you capitalize every word in CSS?

Text-Transform Values uppercase makes all of the letters in the selected text uppercase. capitalize capitalizes the first letter of each word in the selected text. none leaves the text's case and capitalization exactly as it was entered. inherit gives the text the case and capitalization of its parent.

How do I get the first letter of a capital in CSS?

capitalize − The first letter of each word in the element's text should be capitalized. uppercase − All of the characters in the element's text should be uppercase (capital letters). lowercase − All of the characters in the element's text should be lowercase.


1 Answers

This should do it when you have the single words in different div's

#test3 { text-transform: lowercase; }  #test3::first-letter { text-transform: uppercase; }   <div id="test3">haLLo</div> 
like image 78
bdart Avatar answered Nov 02 '22 23:11

bdart