How to capitalize a word that has all letters in as capital letters in css OR php

I have the following code and using css text-transform property with a value of capitalize or php ucwords() I get the title capitalized but when the title is provided with all letters as capitals it doesn’t work. How can I achieve the output to be capitalized regardless of the title provided?

  <h4 style="text-transform: capitalize;">
      <a href="{{ route('', $post )}}">{{ $post->title }}</a>


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

As long as it’s only one line you can do it with CSS by combining lowercase and capitalize using the first-line pseudo selector:

.title-case {
  text-transform: lowercase;
  display: inline-block;

.title-case::first-line {
  text-transform: capitalize;
  <a class="title-case" href="#" rel="nofollow noreferrer noopener">SHOUTING</a>

Method 2

Twig has as capitalize filter

{{ ‘my first car’|capitalize }}

{# outputs ‘My first car’ #}

Perfect spot to do this, the view that is.

Method 3

A php solution would be to convert case to lower and then use ucfirst

$text = 'THIS IS A TITLE';
$normalText = ucfirst(strtolower($text));
echo $normalText;

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x