How to convert capitalized sentence into first word uppercase?

Question

Input: I AM A STUDENT
Expected Output: I Am A Student
How can I achieve this using css?

If it's written capitalized within the code you cannot change it with CSS — Temani Afif, Jun 24 '18 at 10:40
With CSS, the closest you can come is uppercase the first letter of the sentence. https://codepen.io/anon/pen/aKKPjL Otherwise, you need JavaScript. — Mr Lister, Jun 24 '18 at 10:47

score 4 · Accepted Answer · answered Jun 26 '18 at 14:48

4

p {
  text-transform: lowercase;
}
p:first-line {
  display: block;
  text-transform: capitalize;
}

<p>I AM A STUDENT</p>

answered Jun 26 '18 at 14:48

Anil Suwal Qode

110
5

Great idea! I like the approach. – leonheess Jun 29 '18 at 08:49

leonheess · Answer 2 · 2019-05-28T12:07:45.707

You can use the text-transform-property of CSS if the text is lowercase to begin with:

p {
  text-transform: capitalize;
}

If the text is already capitalized you unfortunately can only transform it into lowercase. Alternatively you could us the ::first letter-selector like @Mr Lister suggested and put every word into a span like so:

p {
  text-transform: lowercase;
}

span {
  display: inline-block;
}

span::first-letter {
  text-transform: capitalize;
}

<p> <span>I</span> <span>AM</span> <span>A</span> <span>STUDENT</span> </p>

Other than that you could, of course, do this with JavaScript as discussed in this thread but that should be a last resort.

How to convert capitalized sentence into first word uppercase?

2 Answers2