How to convert UPPERCASE text to Title Case using CSS


Tags: css

Problem :

If you're reading this you probably noticed that the CSS property text-transform:capitalize; does not convert THIS into This. Instead the, non-initial characters remain capitalized, so the transformation has no effect in this case. So how can we achieve this result?

I've seen this asked often and most answers are quick to promote using javascript to accomplish this. This will work, but it is unnecessary if you are writing or customizing a template/theme for a PHP CMS like Wordpress, Drupal, or Joomla.



Solution :

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.


    CSS Howto..

    CSS: How to make left float div to adjust height dynamically? [duplicate]

    How to make a div to float left/right inside a centered div

    How to CSS the select field so that it occupy the entire cell of my table?

    How to remove the input field around an image button?

    How to have JavaScript read a value appended with CSS at a given ID

    How do people make sections in HTML pages? [closed]

    how to set a default prompt when nothing selected for “select” using css

    How to hide a column in the Webgrid in aspasp.net MVC?

    CSS class is missed after jQuery replaceWith. How to fix?

    How do I center my search form within a div?

    how to give no-more-use of css in jquery for css params

    How to remove border from appearing around the image?

    How to restrict CSS animation to a certain div?

    How to apply bootstrap css to all buttons

    How to make a titled box with css?

    How do I target a div without a class or id but with all these specific style-attributes

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    How to prevent a closing tag from being removed?

    How to make a parent object in CSS menu stay in hover state when children are hovered over

    how to load an external css file if javascript is disabled

    How to add space between inline-block elements?

    Optimizing CSS - how to properly reduce CSS footprint [closed]

    How to prevent text style defaults during CSS transition

    How to add Print headers and footers in HTML, CSS and JavaScript?

    how can i style processing.js element?

    How to use fallback values for `display` property in CSS?

    How can I align two icons on my webpage next to each other?

    How to move text using CSS animation?

    How can I use dropdowns in a masonry layout?

    how to set menu to activate always hover effect on [closed]