text — transform

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

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

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

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

Свойство 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; >    Скопировать Скопировано Не удалось скопировать   

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

Преобразование текста

uppercase и lowercase преобразуют текст в верхний и нижний регистр соответственно, тогда как утилита capitalize преобразует текст в регистр заголовка. Утилиту normal-case можно использовать для сохранения исходного регистра — обычно для сброса заглавных букв в разных контрольных точках.

normal-case

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

capitalize

Быстрая коричневая лиса прыгает через ленивую собаку.

p class="normal-case . ">Быстрая коричневая лиса . p> p class="uppercase . ">Быстрая коричневая лиса . p> p class="lowercase . ">Быстрая коричневая лиса . p> p class="capitalize . ">Быстрая коричневая лиса . p>

Применяя условно

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : uppercase , чтобы применять утилиту uppercase только при hover .

p class="capitalize hover:uppercase"> p> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: uppercase , чтобы применить утилиту uppercase только на экранах среднего размера и выше.

p class="capitalize md:uppercase"> p> 

Copyright © 2023 Tailwind Labs Inc.

Начать каждое предложение с заглавной буквы средствами css

Хочу чтобы каждое предложение начиналось с заглавной буквы. Какими средствами css пользоваться? text-transform поднимает либо все, либо каждое слово.

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 25 июн 2013 в 13:45
Ратмир Белых Ратмир Белых
65 2 2 серебряных знака 5 5 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

На чистом CSS такое сделать нельзя. Либо заворачивайте каждое предложение в отдельный div и используйте псевдокласс :first-letter , либо прикручивайте JavaScript.

Отслеживать
ответ дан 25 июн 2013 в 13:51
23.4k 3 3 золотых знака 49 49 серебряных знаков 70 70 бронзовых знаков
Спасибо, все понял. Сделал так .entry-title::first-letter < text-transform: capitalize !important; >
25 июн 2013 в 14:03

А Вам не кажется, что Вы занимаетесь ерундой? Нет, к @fori1ton претензий нет, он ответил на Ваш вопрос — предложил варианты. Но какая необходимость грузить код таким количеством div’ов — по одному на каждое предложение? Не проще ли прописать ручками? На мой взгляд, каждое предложение заворачивать в div — изврат и это еще мягко сказано!

CSS урок 11. Регистр букв

Вот уже несколько уроков мы вовсю изощряемся с форматированием текста посредством CSS, а в этот раз мы учимся менять регистр текста. В этом плане каскадные таблицы стилей открывают перед нами очень широкие возможности, а если быть точнее, мы можем:

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

«Это все, конечно, хорошо, но когда это может понадобиться?» — спросите вы. Представим себе такую ситуацию, когда вам нужно отобразить все пункты меню заглавными буквами. Для этого не обязательно набирать их, включая клавишу CapsLock, или держа нажатым кнопку Shift. Будет достаточно задать всем пунктам списка отображение в верхнем регистре, создав соответствующее правило в CSS файле. И это лишь одна из многих возможных ситуаций.

Видеоверсия:

Свойство text-transform

Управлять регистром текста мы будем при помощи свойства text-transform. У нее есть 4 основных значения — uppercase (заглавные буквы), lowercase (строчные буквы), capitalize (верхний регистр у каждой первой буквы слова, остальные значения не меняются), none (не применяется форматирование). На первый взгляд вам все это может показаться очень сложным.

Но на практике все довольно просто, в чем вы сейчас и убедитесь. Главное — это подобрать правильный селектор, ведь значения свойства text-transform наследуются.

Выделяем заглавными буквами

Первым делом я предлагаю задать всему тексту заглавные буквы, для чего мы создаем следующее CSS правило:

body

В принципе, ничего сложного, мы лишь использовали значение uppercase. Как говорится, все интуитивно понятно. Вот как это выглядит в жизни:

Нижний регистр — применить для всех

Следующим шагом давайте повсеместно применим строчные буквы, для чего пишем следующее:

body

Как вы уже наверное догадались, два значения, с которыми мы только что познакомились являются в какой-то мере антонимами. А на иллюстрации ниже вы можете видеть результат только что созданного свойства.

Выделяем первую букву каждого слова верхним регистром

Для этого нам достаточно воспользоваться соответствующим значением:

body

Не знаю насколько часто вы будете использовать такое CSS правило, однако знать о подобной возможности вам не помешает, особенно при решении нетривиальных задач. Результат виден на изображении ниже.

И наконец, давайте вкратце остановимся на последнем значении — none. Как я уже говорил, он может применяться для отмены наследования от родителя. Например, представим что у нас действуют все предыдущие правила, а для абзацев нам стоит их отменить, для этого мы пишем следующее:

Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

• Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
• [popup_trigger tag=»span»] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!