CSS from uppercase to capitalize

Question

I need to transform my uppercase text in capitalize text in the html page.

<ng-container *ngFor="let item of parameterStruct">
  <span class="sideBar-text" style="font-size: 12px"> 
    {{item.description}}
  </span>
</ng-container>

From item.description I get an uppercase text. Is there a way to use a css property in order to have a capitalize text?

`Is There A Way To Use A Css Property In Order To Have A Capitalize Text?` what does this mean ? — Tony Ngo, Aug 27 '19 at 08:52
Short answer: no, this cannot be done in pure CSS, you will need JS to achieve this. Long answer: see https://stackoverflow.com/a/21829777/540725 — N4ppeL, Aug 27 '19 at 08:56

jean-charles Bonnard · Accepted Answer · 2019-08-27T09:23:46.307

4

The thing is capitalize won't lowercase other characters from an uppercase text. What you can do is

.sideBar-text{
    text-transform : lowercase;
}

.sideBar-text:first-letter{
    text-transform : uppercase;
}

https://www.sassmeister.com/gist/d2c9fe2e136efefbdb59a9ae4ee4e689

Hope it helps ;)

edited Aug 27 '19 at 09:23

answered Aug 27 '19 at 08:55

jean-charles Bonnard

56
5

This works only if its one word per html-element – N4ppeL Aug 27 '19 at 08:58
I don't get it : check this link, I think it's a two words HTML ;) https://www.sassmeister.com/gist/d2c9fe2e136efefbdb59a9ae4ee4e689 – jean-charles Bonnard Aug 27 '19 at 09:23
Yes. "world" is lowercase. Capitalize would mean to output "Hello World". Not sure tough if this is really what is intended by GigiProve, but if not the question should be edited accordingly – N4ppeL Aug 27 '19 at 09:35
Oh, right, depends on what he wants ! In my head it was clear he only wanted the first letter =D What about angular lowercase pipe combined with CSS capitalize then ? – jean-charles Bonnard Aug 27 '19 at 09:44

score -1 · Answer 2 · answered Aug 27 '19 at 08:55

-1

Have you tried capitalize?

.capitalize {
  text-transform: capitalize;
}

<span class="sideBar-text capitalize" style="font-size: 12px"> 
  {{item.description}}
</span>

answered Aug 27 '19 at 08:55

Riku

652
1
9
24

Darpan Rangari · Answer 3 · 2020-01-13T14:40:23.163

-3

You can use css text-transform: capitalize; to make text to Upper case.

More description can be found here : https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

edited Jan 13 '20 at 14:40

answered Aug 27 '19 at 08:57

Darpan Rangari

1,494
11
22

CSS from uppercase to capitalize

3 Answers3