text-transformСвойство в CSS управляет регистр текста и капитализации.
.lowercase ( text-transform: lowercase; )Значения преобразования текста
lowercaseделает все буквы в выбранном тексте строчными.uppercaseпереводит все буквы в выбранный текст в верхний регистр.capitalizeделает заглавными первую букву каждого слова в выделенном тексте.noneоставляет в тексте регистр и заглавные буквы в точности так, как они были введены.inheritдает тексту регистр и заглавные буквы его родительского элемента.
Демонстрационная ниже показывает lowercase, uppercaseи capitalizeв использовании. Взгляните на вкладку HTML, чтобы увидеть, как изначально был написан текст, затем вернитесь на вкладку результатов, чтобы увидеть его после применения CSS.
См. Pen 0f4293fce0d14aafc3818c950ab0ded3 от mariemosley (@mariemosley) на CodePen.
Точки интереса
capitalizeбудет использовать заглавные буквы в одинарных или двойных кавычках, а также в первой букве после дефиса. Первая буква после числа не будет заглавной, поэтому такие даты, как «4 февраля 2015 года», не будут преобразованы в «4 февраля 2015 года».
capitalizeвлияет только на первые буквы слов. Это не изменит регистр остальных букв в слове. Например, если вы capitalizeуже написали слово, состоящее только из заглавных букв, остальные буквы в слове не переключатся на строчные. Это удобно, если в вашем тексте есть акроним или сокращение, которое не должно включать строчные буквы.
CSS не может использовать «регистр заголовков» - стиль использования заглавных букв, используемый в названиях книг, фильмов, песен и стихов, где статьи пишутся строчными буквами (как в «В поисках утраченного ковчега»). Но есть решения JavaScript для заголовков, в том числе toTitleCase () Дэвида Гоуча.
Дополнительная информация
- текстовое преобразование в MDN
- текстовое преобразование в спецификации W3C
- Примечания о доступности текста в верхнем регистре из WebAIM
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | Любой | Любой | Любой | Любой | Любой | Любой |
Firefox поддерживает специфичные для языка правила использования заглавных букв для тюркских языков, немецкого, голландского и греческого языков, которые не поддерживаются другими браузерами. Firefox также является единственным браузером, который поддерживает text-transform: full-width;, что может помочь улучшить читаемость текста, который включает смесь латинских и восточноазиатских сценариев. Подробности смотрите на MDN.