0

https://www.w3schools.com/cssref/pr_text_text-transform.asp

From this link I have tried and it does transform text from lower case to Capitalize but it doesn't convert upper case into Capitalize.

For example, "HELLO" won't be converted into "Hello" using 'text-transform: capitalize;'.

Thanks in advance!

curveball
  • 4,320
  • 15
  • 39
  • 49
  • Not really, see http://stackoverflow.com/questions/3471157/css-text-transform-capitalize-on-all-caps – helb Mar 29 '17 at 07:51
  • `text-transform: capitalize` only uppercase the first letter of each word. Other letters are not changed. – FarZzTM Mar 29 '17 at 07:55

1 Answers1

2

try this .. that should work!:

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

(SRC: https://stackoverflow.com/a/10256138/7703846)

EDIT:

This isn't a clear solution, because there is no other way to fix ur problem via css, it will only uppercase the first letter for example... for a whole p / div element! If you want to use it on span you need to add display:block/display:inline-block too! (thx to helb)

EDIT2: (Example)

<!DOCTYPE html>
<html>
<head>
<style>


p.capitalize {
    text-transform: lowercase;
}
p.capitalize:first-letter {
    text-transform: uppercase;
}
</style>
</head>
<body>

<p class="capitalize">THIS IS SOME TEXT.</p>

</body>
</html>
Community
  • 1
  • 1
Degcube
  • 82
  • 10
  • That won't work for more than one word… – helb Mar 29 '17 at 07:56
  • Its converting to small, but the first letter is not becoming capital. –  Mar 29 '17 at 07:58
  • 1
    @AntrikshaSomani `::first-letter` only works on block elements. So it should work with eg. `

    ` or `

    ` but not `` etc. (unless you add `display: block` or `inline-block` to it).
     – helb Mar 29 '17 at 08:05