CODEWITHSUNDEEP
css
enjoylife
enjoylife

Reputation: 5469

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>
<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>

Upvotes: 424

Views: 724023

Answers (9)

Sebastian Vorac
Sebastian Vorac

Reputation: 4743

To capitalize text, you can use either

  1. text-transform: capitalize
  2. text-transform: uppercase on ::first-letter
  3. Javascript

Here’s a comparison with examples:

function capitalizeFirstLetter(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}

console.log(capitalizeFirstLetter('this is a paragraph using javascript capitalizeFirstLetter function'))
.first-letter p::first-letter {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}
<div class="first-letter">
  <p>this is a paragraph using ::first-letter.</p>
</div>

<div class="capitalize">
  <p>this is a paragraph using text-transform: capitalize.</p>
</div>

Differences:

text-transform: capitalize;: Capitalizes the first letter of every word.

::first-letter: Affects only the first character of the first word in a block.

Use javascript if you can’t modify CSS directly, but it’s slower for large text blocks compared to CSS.

Conclusion:

text-transform is efficient and automatically applies to new content. Use .capitalize { text-transform: capitalize; } for consistent styling

Upvotes: 1

BoltClock
BoltClock

Reputation: 724552

There's a property for that:

a.m_title {
  text-transform: capitalize;
}
<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>

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;
}

Upvotes: 947

OzgurG
OzgurG

Reputation: 2038

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>

Upvotes: 75

Se&#241;or Ben
Se&#241;or Ben

Reputation: 7

Works in React Native too:

    textTransform: 'capitalize'

Upvotes: -7

Amr Elgarhy
Amr Elgarhy

Reputation: 69042

CSS :first-letter Selector

or:

text-transform: capitalize;

Upvotes: 64

Maurizio Battaghini
Maurizio Battaghini

Reputation: 478

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

Upvotes: 22

Gnana Sekar
Gnana Sekar

Reputation: 29

<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>

Upvotes: 2

Kevin Davis
Kevin Davis

Reputation: 365

I would recommend that you use the following code in CSS:

    text-transform:uppercase;

Make sure you put it in your class.

Upvotes: -4

Logus Graphics
Logus Graphics

Reputation: 1933

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}

Upvotes: 95

Related Questions