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

Question

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('posts.show', $post )}}">{{ $post->title }}</a>
  </h4>

Using CSS or PHP? Does the title contain only one word? Or multiple? Can you post any examples? — brombeer, Sep 18 '21 at 08:53
Does this answer your question? [Lower case all then capitalize - pure CSS](https://stackoverflow.com/questions/21827377/lower-case-all-then-capitalize-pure-css) — Florian Motteau, Sep 18 '21 at 08:53
@FlorianMotteau Yes, it does answer my question by indicating it's not possible with css but I asked how to do it in css or php and apparently is possible and easy in php. Confused, should I still accept it as a duplicate question? Kindly advice! — Alphy Gacheru, Sep 18 '21 at 09:15

score 2 · Answer 1 · answered Sep 18 '21 at 09:06

2

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;
}

<h4>
  <a class="title-case" href="#">SHOUTING</a>
</h4>

answered Sep 18 '21 at 09:06

dave

2,750
1
14
22

Thank you, but unfortunately, I'm displaying titles of posts so this won't help. – Alphy Gacheru Sep 18 '21 at 09:17

score 1 · Answer 2 · answered Sep 18 '21 at 09:15

1

Twig has as capitalize filter

https://twig.symfony.com/doc/3.x/filters/capitalize.html

{# outputs 'My first car' #}

Perfect spot to do this, the view that is.

answered Sep 18 '21 at 09:15

user1207013

38
6

1

Laravel doesn't use Twig but Blade – brombeer Sep 18 '21 at 09:18
Unfortunately, I'm not using twig template engine! I'm using Laravel which uses blade. – Alphy Gacheru Sep 18 '21 at 09:22
1

Possible Blade solution https://stackoverflow.com/questions/32489324/how-to-capitalize-first-letter-in-laravel-blade – user1207013 Sep 18 '21 at 09:25
@user1207013 It works but when all the letters are uppercase in a word it doesn't work. – Alphy Gacheru Sep 18 '21 at 09:37
This solution will not work if the words are already in UPPER Case (Whole word) – ManojKiran A Sep 18 '21 at 11:38

score 0 · Accepted Answer · answered Sep 18 '21 at 09:11

0

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;

answered Sep 18 '21 at 09:11

endeavour

576
4
15

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

3 Answers3