Force capitalised input to title case in CSS using text-transform

We can use a trick to do it. But watch for browser compatibility. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

p{
  text-transform: lowercase;
 }

p:first-letter{
  text-transform: uppercase;
}

Eg:

this is some text. This is SOME text. this IS some TEXT.

Output -> This is some text


text-transform: capitalize; only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.

Example:

JoHN smith will become JoHN Smith

There is no way to do title-casing using only CSS unless all of your words are all lowercase.

Tags:

Css

String

Text