CSSjQuery

Text-Transform CSS

By August 1, 2017 No Comments

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