Make the first character Uppercase in CSS

ID : 10257

viewed : 18

Tags : csscss

Top 5 Answer for Make the first character Uppercase in CSS

vote vote

93

There's a property for that:

a.m_title {     text-transform: capitalize; } 

If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn't really matter). Note that in order for :first-letter to work your a elements need to be block containers (which can be display: block, display: inline-block, or any of a variety of other combinations of one or more properties):

a.m_title {     display: block; }  a.m_title:first-letter {     text-transform: uppercase; } 
vote vote

80

Note that the ::first-letter selector does not work with inline elements, so it must be either block or inline-block, as follows:

.m_title {display:inline-block} .m_title:first-letter {text-transform: uppercase} 
vote vote

73

CSS :first-letter Selector

or:

text-transform: capitalize; 
vote vote

64

Make it lowercase first:

.m_title {text-transform: lowercase} 

Then make it the first letter uppercase:

.m_title:first-letter {text-transform: uppercase} 

"text-transform: capitalize" works for a word; but if you want to use for sentences this solution is perfect.

Example:

.m_title {   display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */      text-transform: lowercase }  .m_title:first-letter {   text-transform: uppercase }
<a class="m_title" href="">gorr</a> <a class="m_title" href="">trro</a> <a class="m_title" href="">krro</a> <a class="m_title" href="">yrro</a> <a class="m_title" href="">gwwr</a>

vote vote

55

I suggest to use

#selector {     text-transform: capitalize; } 

or

#selector::first-letter {     text-transform: uppercase; } 

By the way, check this w3schools link: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Top 3 video Explaining Make the first character Uppercase in CSS

Related QUESTION?