How to Convert Uppercase Text to Title Case Using CSS

How to convert UPPERCASE text to Title Case using CSS

The bad news is that there is no such thing as text-transform : title-case which would guarantee the result to be title cased. The good news is that there IS a way to do it, which doesn't require javascript (as is often suggested for this situation). If you are writing a theme for a CMS you can use strtolower() and ucwords() to convert the relevant text to title case.

BEFORE (THIS DOESN'T WORK):

<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>

AFTER:

<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>

If you are writing a theme, you'll probably be working with variables instead of text strings, but the function and the concept work the same way. Here's an example using the native Wordpress function get_the_title() to return the page title as a variable:

<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title); 
<h1>
<?php echo $title;
</h1> 
?>

Hope this helps someone. Happy coding.

Force capitalised input to title case in CSS using text-transform

text-transform: capitalize; only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.

Example:

JoHN smith will become JoHN Smith

There is no way to do title-casing using only CSS unless all of your words are all lowercase.

CSS text-transform capitalize on all caps

There is no way to do this with CSS, you could use PHP or Javascript for this.

PHP example:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery example (it's a plugin now!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

How to apply Title Case in input box through css

You can do like following way using css. This will work for all word.

input {   text-transform: capitalize;}::-webkit-input-placeholder {     text-transform: none;}:-moz-placeholder {     text-transform: none;}::-moz-placeholder {     text-transform: none;}:-ms-input-placeholder {     text-transform: none;}

<input type="text" placeholder="test" />

Most efficient way to turn all caps into title case with JS or JQuery?

You could match consecutive word characters, and use a replacer function to replace with the first character (as-is), followed by the rest with toLowerCase() called on them:

const text = 'THIS IS MY STRING WHY AM I YELLLING?';const output = text.replace(  /(\w)(\w*)/g,  (_, firstChar, rest) => firstChar + rest.toLowerCase());console.log(output);

how to make an uppercase title h1 to sentence case Like this example using css

Ciao Angelo, I can’t help you with your first case “ExaMple title” but I’m pretty sure you can get “Example title” with the following code:

HTML:

<h1>EXAMPLE TITLE</h1>

CSS:

h1 { text-transform: lowercase; }
h1:first-letter { text-transform: uppercase; }

EDIT: You wrote that H1 tag forces your text to uppercase, this is not a standard behavior of that tag, this means that you have already a CSS rule like this:

h1 { text-transform: uppercase; }

Can’t you remove that line from your current CSS?

Transform ALL CAPS to Proper Case using CSS and jQuery

I modified the code from Greg Dean's answer in a related question.

I would call this algorithm an educated guess at best since it's not actually evaluating English capitalization rules. You'll probably need to add more words to the noCaps list for better accuracy.

Example

JS

var ele = $('p'); 
ele.text(toProperCase(ele.text())); 

function toProperCase(str)
{
    var noCaps = ['of','a','the','and','an','am','or','nor','but','is','if','then', 
'else','when','at','from','by','on','off','for','in','out','to','into','with'];
    return str.replace(/\w\S*/g, function(txt, offset){
        if(offset != 0 && noCaps.indexOf(txt.toLowerCase()) != -1){
            return txt.toLowerCase();    
        }
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

HTML

<p>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

---

Related Topics