text-transform¶

Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

Когда значение отлично от none, регистр исходного текста будет изменён.

Демо¶

Текст

Синтаксис¶

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

Значения¶

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

Значение по-умолчанию:

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>