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:
<a class="m_title" href="">gorr</a开发者_JAVA百科>
<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>
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}
CSS :first-letter Selector
or:
text-transform: capitalize;
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 trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr gwwr gwwr</a>
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
<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>
I would recommend that you use the following code in CSS:
text-transform:uppercase;
Make sure you put it in your class.
Works in React Native too:
textTransform: 'capitalize'
精彩评论