How can I capitalize the first letter of each word in CSS?

Question

I am trying to capitalize the first letter of each word. I did search for it but i did not get it, is it possible in CSS?

My Code currently works for the first lette

Answer 1

There is no way of doing this with CSS alone if the text in the element is in ALL CAPS already, the capitalize style will not work as it only changes the case to uppercase. example:

p {
  text-transform: capitalize;
 }

<p>some text</p>
<p>Some text</p>
<p>SOME TEXT</p>
<p>sOME tExt</p>

If the entire text is already in lowercase, you can style it with the element{ text-transform: capitalize; }, but if elements are already in uppercase, the text-transform: capitalize; will not accomplish a "title caps". You will need to insert a javascript element.toLowerCase(); on the element in question then have CSS work its magic.

However, looking at the code provided and your question, the text is already doing what you want and the css selectors don't match the element so I'm not entirely certain what you are trying to accomplish.

Answer 2

The :first-letter pseudo-element targets the first letter of your element, not the first letter of each word. Besides, you're wrappring your code in a span in HTML and targetting a th in CSS, is it supposed to be like that?

Try using this instead :

 .listing-table table th{
     text-transform: capitalize;
 }

Documentation of text-transform

Answer 3

You can try to use this:

p { text-transform: capitalize; }

From the docs:

text-transform

This property controls capitalization effects of an element's text.

capitalize Puts the first character of each word in uppercase; other characters are unaffected.