Hello World none (baseline) text-transform: none | hello world uppercase text-transform: uppercase | HELLO WORLD lowercase text-transform: lowercase | hello world capitalize text-transform: capitalize |
Capitalize only uppercases the first letter of each whitespace-delimited word - a hyphenated compound stays one word, not three separately-capitalized fragments.
editor-in-chief hyphenated compound text-transform: capitalize | hELLO wORLD already mixed case text-transform: capitalize | 'twas the night leading punctuation text-transform: capitalize | one two three multiple spaces text-transform: capitalize |
text-transform is an inherited property - a child inline element picks it up from its parent unless it sets its own value.
parent child inherits child inherits parent's uppercase div { text-transform: uppercase } span (no override) | parent child overrides child overrides to none span { text-transform: none } | PARENT child override child overrides to capitalize div { text-transform: lowercase } span { text-transform: capitalize } | no transform plain child baseline, no transform anywhere (none set) |
important notice uppercase + bold text-transform: uppercase; font-weight: bold | quarterly report capitalize + centered text-transform: capitalize; text-align: center | click here uppercase + underline text-transform: uppercase; text-decoration: underline |
capitalize list marker text ul { text-transform: capitalize } |
Confirms word-wrapping and width measurement operate on the transformed text, not the original - the paragraph below wraps the same as untransformed text of equal length would.
the quick brown fox jumps over the lazy dog near the riverbank at dawn. uppercase paragraph, narrow column text-transform: uppercase; width: 140px | the quick brown fox jumps over the lazy dog near the riverbank at dawn. capitalize paragraph, narrow column text-transform: capitalize; width: 140px |