Comments on: text-transform

By: Daniel Dibaba

Daniel Dibaba — Sat, 03 Jul 2021 12:20:42 +0000

I think the order is important. Make the element {text-transform:lowercase} the first and

item:first-letter {
  text-transform: capitalize;
}

the next

By: Theresa

Theresa — Tue, 31 Mar 2020 16:12:18 +0000

Another Point of Interest is that anything inside () also gets capitalized, which means “grade level(s)” becomes “Grade Level(S)” :(

By: Luke R

Luke R — Fri, 02 Aug 2019 18:55:33 +0000

Looks like in Firefox hyphenated words only have the first word capitalized, ie, Double-parked, not Double-Parked.

By: Lars

Lars — Fri, 19 Oct 2018 09:32:35 +0000

In reply to Vishal. Very useful comment ++. I just added this to a span, ended up using display: inline-block on it, which in my use case had other benefits.

By: Andrew

Andrew — Fri, 20 Jul 2018 00:51:23 +0000

In reply to Kellie.

try this…

.item {
text-transform: lowercase;
}

item:first-letter {
text-transform: capitalize;
}

By: Sara Walker

Sara Walker — Fri, 15 Jun 2018 21:19:33 +0000

CHRIS COYIER – you ARE the man! You help me out on a daily basis with your ‘CSS Tricks’. Thank you for your insight – as always.

By: Govind Patil

Govind Patil — Mon, 06 Nov 2017 10:31:19 +0000

In reply to Joe.

Browser support needs correction here.
“initial” value is not supported in IE11 and Lower Versions. Instead we can set value “none” which works on all major browsers.

By: Vishal

Vishal — Thu, 26 Oct 2017 13:29:45 +0000

If the display is inline the above wont work

By: Duncan

Duncan — Wed, 10 May 2017 16:13:52 +0000

In reply to Joe. @samuel Just to clarify: selector:first-letter {} 1x : won't work since that's trying to target a pseudo-class. It has to be: selector::first-letter {} 2x : which targets the 'first-letter' pseudo-element. Joe's snippet has the correct :: in action.

By: Kellie

Kellie — Wed, 15 Mar 2017 22:41:40 +0000

Wishing there was a “sentence case” so I could turn huge blocks of all caps text into comfortably readable sentences with just the initial letter of the first word capitalized. Maybe in the next version of CSS? (crossing fingers…)

By: Joe G

Joe G — Fri, 03 Feb 2017 01:43:07 +0000

In reply to Joe.

@Samuel . this worked when the letters came into the source all caps. Tested in Chrome. What browser are you trying it in? It’s cross-browser compatible so it should be fine: http://caniuse.com/#search=first-letter

.page-content .page-title::first-letter {
    font-weight: 600;
    text-transform: uppercase;
}
.page-content .page-title {
    font-size: 26px;
    text-transform: lowercase;
}

By: samuel

samuel — Thu, 02 Feb 2017 23:00:16 +0000

In reply to Joe.

I tried this:

element:first-letter {text-transform:uppercase}
element {text-transform:lowercase}

but this doesn’t work. It returns all letters to be small letters

By: Jorge Hawkins

Jorge Hawkins — Mon, 07 Nov 2016 18:43:20 +0000

In reply to Joe.

Use text-transform: uppercase on the first letter, and text-transfrom: lowercase on the rest.


element:first-letter {text-transform:uppercase}

element {text-transform:lowercase}

By: Karthik

Karthik — Fri, 04 Mar 2016 06:59:23 +0000

@JOE, I have a similar issue as yours. The input data is all caps which I convert into camel case/title case using the CSS text-transform:capitalize after converting them to lowercase. But the issue now is, few abbreviations and acronyms such as “US” or “U.S”, also go through this transformation. This needs to be avoided. Any ideas or suggestions?

By: Joe

Joe — Wed, 02 Dec 2015 16:59:52 +0000

If content is put in with all CAPS, and the front-end should be Capitalized, using capitalize won’t work, as Chris points out. How can all caps be changed into capitalized words with CSS, and without going into the CMS and changing the text? I tried wrapping the text in a parent span, lowercasing that, than capitalizing the child span, but that didn’t work for obvious reasons – but it was one of those ‘might as well try it’ ideas.