Make the First Character Uppercase in Css
Is There a Way to Make the First Character Uppercase in a Label in Css. Here Is My Html: Gorr Trro Krro Yrro Gwwr 1 8 Answers There's a Property for That: A...
Is there a way to make the first character Uppercase in a label in CSS.
Here is my HTML:
<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>8 Answers
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;
}
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}
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 () */
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>I suggest to use
#selector {
text-transform: capitalize;
}
or
#selector::first-letter {
text-transform: uppercase;
}
By the way, check this w3schools link:
<script type="text/javascript">
$(document).ready(function() {
var asdf = $('.capsf').text();
$('.capsf').text(asdf.toLowerCase());
});
</script>
<div style="text-transform: capitalize;" class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>
Works in React Native too:
textTransform: 'capitalize'
I would recommend that you use the following code in CSS:
text-transform:uppercase;
Make sure you put it in your class.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
