Skip to main content

Is there a way to text-transform an all caps dataset?

Example data:

THIS IS MY TEXT

If I add text-transform:capitalize; on that text nothing happens.

My desired output of the original text would be:

This Is My Text

It turns out that the text-transform CSS property works for capitalize is taking the first letter for each word and making it uppercase.  Since everything is already uppercase nothing is applied.  We’ll need a bit of jQuery to accomplish the task.

HTML:

<div class="capitalize">
	THIS IS SOME TEXT
</div>
<div class="capitalize">
	this is some text
</div>

CSS:

.capitalize {
  text-transform: capitalize;
}

jQuery:

$(document).ready(function()
{
  $(".capitalize").each(function() {
    $(this).text($(this).text().toLowerCase());
  });
});

Demo here

Leave a Reply