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>_x000D_
<a class="m_title" href="">trro</a>_x000D_
<a class="m_title" href="">krro</a>_x000D_
<a class="m_title" href="">yrro</a>_x000D_
<a class="m_title" href="">gwwr</a>
_x000D_
This question is related to
css
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}
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
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.
I would recommend that you use the following code in CSS:
text-transform:uppercase;
Make sure you put it in your class.
<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>
Source: Stackoverflow.com