CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text

Sometimes we over-engineer things…

In this previous article I showed you how to capitalize a string with JavaScript.

Here’s a snippet from it:

let str = “hello world”;
let capitalizedStr = str.slice(0, 1).toUpperCase() + str.slice(1);
console.l…


This content originally appeared on DEV Community and was authored by Niall Maher

Sometimes we over-engineer things...

In this previous article I showed you how to capitalize a string with JavaScript.

Here's a snippet from it:

let str = "hello world";
let capitalizedStr = str.slice(0, 1).toUpperCase() + str.slice(1);
console.log(capitalizedStr); // "Hello world"

This might be useful in some cases, but if you are doing it to display a value, there is an easier way.

CSS Text Transform Property

The CSS text-transform property is used to specify text capitalization in an element. This property can be applied to any text-containing element, like paragraphs, headings, lists, etc. The text-transform property accepts the following values:

  • none - Leaves the value unchanged
  • capitalize - Capitalize the value
  • uppercase - Uppercase the value
  • lowercase - Lowercase the value

So to capitalize our paragraphs, it would be as simple as applying the following in our CSS:

p {
  text-transform: capitalize;
}

The CSS text-transform property is a powerful tool for manipulating text styles on a web page, making them convenient to know. 🦾

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉


This content originally appeared on DEV Community and was authored by Niall Maher


Print Share Comment Cite Upload Translate Updates
APA

Niall Maher | Sciencx (2023-04-16T15:19:11+00:00) CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text. Retrieved from https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/

MLA
" » CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text." Niall Maher | Sciencx - Sunday April 16, 2023, https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/
HARVARD
Niall Maher | Sciencx Sunday April 16, 2023 » CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text., viewed ,<https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/>
VANCOUVER
Niall Maher | Sciencx - » CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/
CHICAGO
" » CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text." Niall Maher | Sciencx - Accessed . https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/
IEEE
" » CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text." Niall Maher | Sciencx [Online]. Available: https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/. [Accessed: ]
rf:citation
» CSS Text Transform: You Don’t Need JavaScript to Capitalize Your Text | Niall Maher | Sciencx | https://www.scien.cx/2023/04/16/css-text-transform-you-dont-need-javascript-to-capitalize-your-text/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts