text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
text-transform: capitalize | lowercase | uppercase | none
Значения
- capitalize
- Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
- lowercase
- Все символы текста становятся строчными (нижний регистр).
- uppercase
- Все символы текста становятся прописными (верхний регистр).
- none
- Не меняет регистр символов.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { text-transform: none; }
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-transform</title> <style> h1 { text-transform: uppercase; /* Заглавные буквы */ } p { text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */ } </style> </head> <body> <h1>Культурный памятник Средневековья</h1> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства text-transform
Объектная модель
Объект.style.textTransform
Спецификация
Спецификация | Статус |
---|---|
CSS Text Level 4 | Редакторский черновик |
CSS Text Level 3 | Рабочий проект |
CSS Level 2 (Revision 1) | Рекомендация |
CSS Level 1 | Рекомендация |
Браузеры
4 | 12 | 1 | 7 | 1 | 1 |
1 | 1 | 6 | 1 |