The text-transform property in CSS controls text case and capitalization.
.lowercase {
text-transform: lowercase;
}Text-Transform Values
lowercasemakes all of the letters in the selected text lowercase.uppercasemakes all of the letters in the selected text uppercase.capitalizecapitalizes the first letter of each word in the selected text.noneleaves the text’s case and capitalization exactly as it was entered.inheritgives the text the case and capitalization of its parent.
The demo below shows lowercase, uppercase, and capitalize in use. Take a look at the HTML tab to see how the text was originally written, then switch back to the results tab to see it after the CSS is applied.
See the Pen 0f4293fce0d14aafc3818c950ab0ded3 by mariemosley (@mariemosley) on CodePen.
Points of Interest
capitalize will capitalize words that appear inside single or double quotes, and the first letter after a hyphen. It won’t capitalize the first letter after a number, so dates like “February 4th, 2015” won’t transform into “February 4Th, 2015”.
capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that’s in all capital letters already, the other letters in the word won’t switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn’t include any lowercase letters.
CSS can’t do “title case”, the capitalization style used in titles of books, movies, songs, and poems, where articles are lowercase (as in “Raiders of the Lost Ark”). But, there are JavaScript solutions for title case, including David Gouch’s toTitleCase().
Related Properties
More Information
- text-transform at MDN
- text-transform in the W3C Spec
- Notes on the accessibility of uppercase text from WebAIM
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | Any | Any | Any | Any | Any | Any |
Firefox supports language-specific capitalization rules for Turkic languages, German, Dutch, and Greek that are not supported by other browsers. Firefox is also the only browser that supports text-transform: full-width;, which can help improve the readability of text that includes a mixture of latin and East Asian scripts. See details at MDN.
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.
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}
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
@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
@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.
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.
@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?
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…)
try this…
.item {
text-transform: lowercase;
}
item:first-letter {
text-transform: capitalize;
}
If the display is inline the above wont work
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.
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.
Looks like in Firefox hyphenated words only have the first word capitalized, ie, Double-parked, not Double-Parked.
Another Point of Interest is that anything inside () also gets capitalized, which means “grade level(s)” becomes “Grade Level(S)” :(
I think the order is important. Make the
element {text-transform:lowercase}the first andthe next
How do we deal with stuff like, “McTavish” or O’Brien ?