Свойства текста

CSS предоставляет десятки свойств для управления внешним видом текста: цвет, выравнивание, декорации, межбуквенные и межсловные интервалы, обработка пробелов, перенос строк, направление письма.

Зачем нужно

Текст — основной контент 90% веб-страниц. Правильная работа с текстовыми свойствами CSS определяет читаемость, визуальную иерархию и пользовательский опыт. Без контроля над line-height, letter-spacing, text-overflow невозможно создать качественную типографику.

Где используется

  • Стилизация заголовков, параграфов, ссылок
  • Управление переполнением текста в карточках и кнопках
  • Вертикальные и восточноазиатские направления текста
  • Декоративные эффекты (тени, подчёркивания)
  • Адаптивная типографика

Предпосылки

Цвет текста — color

Задаёт цвет переднего плана (текста, а также значение currentColor).

p {
  color: #333;            /* hex */
}
h1 {
  color: rgb(10, 50, 120); /* rgb */
}
a {
  color: hsl(220, 80%, 50%); /* hsl */
}

color наследуется — задав его на body, вы зададите цвет всему тексту на странице.

Выравнивание текста — text-align

.center { text-align: center; }
.right  { text-align: right; }
.left   { text-align: left; }

/* По ширине — растянуть слова с пробелами */
.justify { text-align: justify; }

/* Выравнивание последней строки */
.article {
  text-align: justify;
  text-align-last: center;
}
Значение Результат
left По левому краю (по умолчанию для LTR)
right По правому краю
center По центру
justify По ширине (растягивает пробелы)
start / end Логические, зависят от направления текста

Декорации текста — text-decoration

/* Короткая запись */
a {
  text-decoration: underline;
}

/* Полная запись (CSS 3) */
a {
  text-decoration-line: underline;
  text-decoration-color: #e74c3c;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Shorthand */
a:hover {
  text-decoration: underline wavy #e74c3c 2px;
}

/* Убрать подчёркивание */
a.clean {
  text-decoration: none;
}
Свойство Значения
text-decoration-line none, underline, overline, line-through
text-decoration-style solid, double, dotted, dashed, wavy
text-decoration-color Любой цвет
text-decoration-thickness Длина или auto, from-font

text-underline-offset

a {
  text-decoration: underline;
  text-underline-offset: 4px; /* Отступ подчёркивания от базовой линии */
}

Трансформация текста — text-transform

.upper  { text-transform: uppercase; }   /* ВСЕ ЗАГЛАВНЫЕ */
.lower  { text-transform: lowercase; }   /* все строчные */
.cap    { text-transform: capitalize; }  /* Каждое Слово С Заглавной */
.none   { text-transform: none; }        /* Без трансформации */
.full   { text-transform: full-width; }  /* Полноширинные символы */

text-transform: uppercase полезен для кнопок и заголовков — текст в HTML остаётся обычным, что лучше для доступности и SEO.

Отступ первой строки — text-indent

p {
  text-indent: 2em; /* Классический «красная строка» */
}

/* Отрицательный отступ — hanging indent */
.hanging {
  text-indent: -2em;
  padding-left: 2em;
}

Тень текста — text-shadow

/* text-shadow: offsetX offsetY blur color */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Несколько теней */
.neon {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa;
}

/* Выемка (letterpress) */
.emboss {
  color: #ccc;
  text-shadow: 1px 1px 0 #fff;
}

Межбуквенный интервал — letter-spacing

.wide {
  letter-spacing: 0.1em; /* Разрежённый текст */
}
.tight {
  letter-spacing: -0.05em; /* Сжатый текст */
}
.heading {
  text-transform: uppercase;
  letter-spacing: 0.15em; /* Типично для uppercase заголовков */
}

Межсловный интервал — word-spacing

p {
  word-spacing: 0.25em; /* Увеличенный интервал между словами */
}

Высота строки — line-height

/* Безразмерный множитель — рекомендуется */
body {
  line-height: 1.5; /* 1.5 × font-size */
}

/* Фиксированная высота */
.label {
  line-height: 20px;
}

/* С единицами */
.note {
  line-height: 1.8em;
}

Best practice: используйте безразмерное значение (1.5), а не 1.5em — безразмерный множитель наследуется и пересчитывается для каждого элемента, а 1.5em вычисляется один раз на родителе.

Обработка пробелов — white-space

/* Сохранить все пробелы и переносы как в HTML */
pre { white-space: pre; }

/* Не переносить строку */
.nowrap { white-space: nowrap; }

/* Сохранить пробелы, но переносить если не влезает */
.prewrap { white-space: pre-wrap; }

/* Схлопнуть пробелы, переносить по словам */
.normal { white-space: normal; }
Значение Пробелы Переносы в HTML Перенос слов
normal Схлопывает Игнорирует Да
nowrap Схлопывает Игнорирует Нет
pre Сохраняет Сохраняет Нет
pre-wrap Сохраняет Сохраняет Да
pre-line Схлопывает Сохраняет Да
break-spaces Сохраняет Сохраняет Да (даже в конце строки)

Перенос слов — word-break и overflow-wrap

/* Разрыв длинных слов в любом месте */
.break-all {
  word-break: break-all;
}

/* Перенос только если слово не влезает */
.break-word {
  overflow-wrap: break-word; /* бывший word-wrap */
}

/* Для CJK-текста — не разрывать фразы */
.keep-all {
  word-break: keep-all;
}

/* Типичная комбинация для безопасности */
.safe-text {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto; /* Переносы со знаком дефиса (если поддерживает язык) */
}

Переполнение текста — text-overflow

/* Однострочный текст с многоточием */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Многострочный текст с обрезкой (webkit) */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

text-overflow: ellipsis работает ТОЛЬКО вместе с overflow: hidden и white-space: nowrap.

Направление письма — writing-mode

/* Горизонтальное письмо (по умолчанию) */
.horizontal { writing-mode: horizontal-tb; }

/* Вертикальное, справа налево (японский/китайский) */
.vertical-rl { writing-mode: vertical-rl; }

/* Вертикальное, слева направо */
.vertical-lr { writing-mode: vertical-lr; }

/* Боковой заголовок */
.sidebar-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Практический пример — карточка с текстом

.card {
  max-width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card__title {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1a1a2e;
  text-transform: none;
}

.card__subtitle {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
}

.card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  overflow-wrap: break-word;
}

/* Обрезка длинного описания */
.card__text--truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Частые ошибки

  1. text-overflow: ellipsis без overflow: hidden — многоточие не появится:

    /* НЕПРАВИЛЬНО */
.label { text-overflow: ellipsis; }

/* ПРАВИЛЬНО */
.label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  2. line-height с единицами в наследовании — дочерние элементы получат вычисленное значение, а не множитель:

    /* ПЛОХО */
body { font-size: 16px; line-height: 24px; }
/* h1 с font-size: 32px получит line-height: 24px — слишком мало! */

/* ХОРОШО */
body { font-size: 16px; line-height: 1.5; }
/* h1 получит line-height: 1.5 × 32px = 48px */

  3. text-align: justify без hyphens — огромные пробелы между словами в узких колонках

  4. Применение letter-spacing к justify-тексту — ломает расчёт пробелов

  5. Забытый text-decoration: none у ссылок — при стилизации кнопок из <a>

Практика

  • Создать блок текста с line-height: 1.6 и letter-spacing: 0.02em
  • Реализовать однострочный truncate с многоточием
  • Реализовать многострочный truncate на 3 строки
  • Создать неоновый эффект текста через text-shadow
  • Стилизовать ссылки с text-decoration: underline wavy и text-underline-offset
  • Попробовать writing-mode: vertical-rl для бокового заголовка

Связанные темы

Ресурсы