css first letter uppercase

Easily manage projects with monday.com

The text-transform property in CSS controls text case and capitalization.

Text-Transform Values

  • lowercase makes all of the letters in the selected text lowercase.
  • uppercase makes all of the letters in the selected text uppercase.
  • capitalize capitalizes the first letter of each word in the selected text.
  • none leaves the text’s case and capitalization exactly as it was entered.
  • inherit gives 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.

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().

More Information

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.

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53801018ba74d6e1 • Your IP : 78.85.5.224 • Performance & security by Cloudflare

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию none
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementBy >elementID «).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Оцените статью