text-transform

CSS-властивість text-transform (укр. — “перетворення тексту”) використовується для зміни реєстру тексту в елементі. Вона дозволяє змінити всі літери на великі чи малі, а також можна застосувати інші варіанти для формату тексту без зміни самого змісту.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

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

Значення

  • uppercase — перетворює весь текст у верхній регістр (всі літери стають великими).
  • lowercase — перетворює весь текст у нижній регістр (всі літери стають малими).
  • capitalize — перетворює першу літеру кожного слова в верхній регістр, інші літери залишаються в нижньому регістрі.
  • none — відключає перетворення тексту (значення за замовчуванням, якщо не вказано інше).

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість text-transform застосовується тільки до текстового вмісту, не впливаючи на інші елементи, такі як зображення або іконки.
  • uppercase та lowercase змінюють всі літери в елементі, навіть якщо текст вже знаходиться в певному регістрі.
  • capitalize особливо корисне для заголовків, де перша літера кожного слова має бути великою (це може бути корисно для назв, що складаються з кількох слів).
  • Властивість text-transform не змінює сам зміст тексту, вона лише змінює візуальне відображення. Якщо потрібно змінити сам текст, слід використовувати JavaScript.
  • Властивість підтримується усіма сучасними браузерами.