How to fix text-transform: capitalize doesn't work

by David Burgos

If you are facing that text with the CSS property text-transform: capitalize; doesn't work, please continue reading to get how to fix it.

How to fix text-transform

When I faced this issue, it was due to all caps text, so you need to transform it to lowercase in your template engine.

For example, in Pug/Jade:

- var text = "MY ALL CAPS TEXT";

//- This doesnt work:
p(style="text-transform:capitalize;")=text

//- This works :)
p(style="text-transform:capitalize;")=text.toLowerCase()

Just apply the toLowerCase() function to the text.

Leave a comment with your doubts or experience