text — transform

Превращаем текст из маленьких букв в текст из БОЛЬШИХ букв.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — transform позволяет трансформировать буквы в тексте. С помощью этого свойства можно сделать текст из одних заглавных или наоборот, из одних маленьких букв вне зависимости от формата исходного текста.

Это свойство важно. Вместо того, чтобы набирать текст одними заглавными буквами, лучше применить его. Поскольку в процессе жизни сайта тексты могут меняться, но их формат должен оставаться одинаковым. Нельзя гарантировать что контент-менеджер вставит текст, написанный заглавными, в нужное место.

Пример

Скопировать ссылку «Пример» Скопировано

   
title case 
Title case (англ. «регистр заголовка»).
   
who framed roger rabbit? 
The overarching villain.
    div class="parent"> h1 class="title">title caseh1> p class="paragraph">Title case (англ. «регистр заголовка»). p> article class="news"> h2 class="title-case">who framed roger rabbit?h2> p class="paragraph">The overarching villain. p> article> div>    Скопировать Скопировано Не удалось скопировать   

Текст в заголовке написан маленькими буквами, но по дизайну, как это часто случается, требуется, чтобы заголовок отображался заглавными буквами. Используем свойство text — transform . Заодно зададим это же свойство для второго заголовка, но со значением capitalize , которое преобразует текст так, чтобы каждое новое слово начиналось с заглавной буквы.

 .title  text-transform: uppercase;> .title-case  text-transform: capitalize;> .title  text-transform: uppercase; > .title-case  text-transform: capitalize; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Слово transform с английского языка переводится как трансформация — преобразование чего-то в нечто другое. Дословно можно перевести всё свойство как текст-трансформация. Или, говоря человеческим языком, трансформация текста.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Пишем свойство text — transform и после двоеточия указываем одно из доступных значений. Значения обозначаются ключевыми словами:

• uppercase — все буквы в тексте, к которому применяется это значение, будут трансформированы в заглавные.
• lowercase — все буквы будут преобразованы в строчные, маленькие.
• capitalize — каждое слово начинается с прописной, заглавной буквы. Это часто необходимо при работе с текстами на английском языке.
• full — width — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат.
• full — size — kana — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат, но используются в рамках элементов (например, когда вам нужно обозначить новый иероглиф, и сверху правила его чтения)
• none — значение по умолчанию, отменяет все трансформации.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство трансформации нельзя анимировать при помощи свойства transition 😒

💡 Значение по умолчанию — none .

💡 При применении свойства text — transform меняется регистр текста. Это означает, что при копировании текст будет именно таким, как отображается на экране.

   
Капсить 
Капсить (сетевой сленг).
   dl> dt class="term">Капситьdt> dd class="meaning">Капсить (i>сетевой сленгi>). dd> dl>    Скопировать Скопировано Не удалось скопировать   

 .term  text-transform: uppercase;> .term  text-transform: uppercase; >    Скопировать Скопировано Не удалось скопировать   

Если скопировать текст и вставить куда-нибудь в текстовое поле, то можно заметить, что все буквы заглавные. Значит, не просто изменилось внешнее отображение текста, а был изменён регистр исходного текста.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Довольно часто в макетах встречаются пункты меню, написанные заглавными буквами. Не нужно в разметке набирать текст заглавными. Скопируй текст из макета и примени свойство text — transform .

          Главная   О компании   Проекты   Контакты     div class="container"> a href="#0" class="logo"> img src="images/logo.png" alt="Company logo"> a> nav class="menu"> ul class="menu-list"> li class="menu-list__item"> a href="#0" class="menu-list__link">Главнаяa> li> li class="menu-list__item"> a href="#0" class="menu-list__link">О компанииa> li> li class="menu-list__item"> a href="#0" class="menu-list__link">Проектыa> li> li class="menu-list__item"> a href="#0" class="menu-list__link">Контактыa> li> ul> nav> div>    Скопировать Скопировано Не удалось скопировать   

 .menu-list  text-transform: uppercase;> .menu-list  text-transform: uppercase; >    Скопировать Скопировано Не удалось скопировать   

Теперь если даже в меню добавится ещё пара пунктов, то они также будут отображаться заглавными буквами.

Источник

CSS text-transform Property

The text-transform property controls the capitalization of text.

Default value:	none
Inherited:	yes
Version:	CSS1
JavaScript syntax:	object.style.textTransform=»uppercase» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
none	No capitalization. The text renders as it is. This is default	Demo ❯
capitalize	Transforms the first character of each word to uppercase	Demo ❯
uppercase	Transforms all characters to uppercase	Demo ❯
lowercase	Transforms all characters to lowercase	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

text-transform

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

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

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Культурный памятник Средневековья

Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.

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

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

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

Объект.style.textTransform

Спецификация

Спецификация	Статус
CSS Text Level 4	Редакторский черновик
CSS Text Level 3	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Рецепты

Источник

CSS Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

Example

p.uppercase <
text-transform: uppercase;
>

p.lowercase text-transform: lowercase;
>

p.capitalize text-transform: capitalize;
>

The CSS Text Transformation Property

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник