Как обрезать текст с помощью CSS

Чтобы обрезать текст в CSS, используйте text-overflow: ellipsis для усечения одной строки и line-clamp для ограничения фиксированным числом строк — именно это различие определяет всё остальное.

Если вы когда-нибудь наблюдали, как заголовок карточки выходит за пределы контейнера, пока text-overflow: ellipsis не делает ровным счётом ничего, вам знакомо это разочарование. Причина сбоя почти всегда сводится к одному из двух: неподходящая техника для нужного количества строк или flex-родитель, который незаметно отказывается сжиматься. Усечение одной строки требует трёх совместно работающих объявлений; многострочное усечение — трио на основе -webkit-box. Проблемы, которые реально возникают в продакшне, вполне конкретны: ellipsis незаметно перестаёт работать внутри flexbox, многострочное усечение не срабатывает, если текст не может переноситься, а усечение средствами JavaScript незаметно уничтожает контент, который считывают программы экранного доступа. Ниже разобраны все рабочие паттерны и подводные камни, с ними связанные.

Правило выбора в табличном виде:

Как обрезать текст до одной строки?

Чтобы обрезать текст до одной строки, три объявления должны работать совместно: white-space: nowrap запрещает перенос текста, overflow: hidden обрезает то, что выходит за границы, а text-overflow: ellipsis добавляет …. Уберите любое из трёх — и эффект нарушится: text-overflow сам по себе не действует на переносимый текст, а без overflow: hidden нет блока отсечения, к которому мог бы примыкать символ многоточия.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

Свойство text-overflow принимает значения clip (жёсткое обрезание по умолчанию), ellipsis и произвольную строку <string>. Существуют также ключевое слово fade и функция fade(), добавленные в стандарт в CSS Overflow Level 4 и упомянутые в формальном синтаксисе MDN, однако ни один браузер фактически их не реализует — не полагайтесь на них в продакшне.

Как обрезать текст до нескольких строк?

Для многострочного усечения задайте display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N и overflow: hidden. Несмотря на вендорные префиксы, эта комбинация поддерживается во всех основных браузерах и сегодня является безопасным для продакшна подходом.

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Не убирайте overflow: hidden. Как отмечает MDN, без него текст фактически не обрезается, однако многоточие всё равно появляется после заданного числа строк — в итоге вы получаете и многоточие, и переполняющий текст, видимые одновременно. Эти свойства с префиксами также взаимозависимы: -webkit-line-clamp работает только тогда, когда display равен -webkit-box (или -webkit-inline-box), а -webkit-box-orient равен vertical. Свойства с префиксами формально устарели, однако трёхсторонняя зависимость между ними сама по себе является частью спецификации, которую браузеры продолжат поддерживать — так что использовать их в продакшне вполне безопасно.

Один важный сценарий сбоя: многострочное усечение работает только при условии, что тексту разрешён перенос. Унаследованный white-space: nowrap незаметно сломает его, сворачивая всё в одну строку. Оставляйте white-space в значении normal или pre-wrap.

Существует также стандартизированное свойство line-clamp без префикса, определённое в CSS Overflow Module Level 4, которое ограничивает содержимое блока заданным числом строк. Однако по состоянию на 2026 год оно всё ещё помечено как не входящее в Baseline, поскольку ряд широко используемых браузеров его не поддерживает. Рассматривайте его как прогрессивное улучшение. Добавляйте его рядом с объявлениями с префиксами, а не вместо них:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* стандартизированный вариант, добавляется рядом — пока не замена */
  overflow: hidden;
}

Почему ellipsis не работает внутри flexbox (и grid)

Ellipsis незаметно перестаёт работать у flex-дочернего элемента, поскольку его min-width: auto по умолчанию не позволяет сжаться ниже ширины содержимого — элемент никогда не становится достаточно узким для переполнения, и text-overflow попросту не имеет что обрезать. Вместо усечения дочерний элемент выходит за пределы контейнера. Исправление — одно объявление на дочернем элементе:

.card { display: flex; }

.card__label {
  min-width: 0; /* переопределяет автоматический минимум, позволяя элементу сжиматься */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Автоматическое минимальное значение min-width: auto применяется и к grid-элементам, поэтому усечение внутри треков CSS Grid не работает по той же самой причине. Исправление идентично: установите min-width: 0 на дочернем элементе (или overflow: hidden, что также снимает автоматический минимум). Это самая распространённая реальная ошибка усечения: CSS выглядит корректно в изоляции и ломается только тогда, когда элемент становится дочерним для flex или grid.

Эквиваленты в Tailwind

Tailwind поставляется с обоими паттернами в виде утилит — никаких плагинов не требуется. Утилита truncate является составной и задаёт overflow: hidden, text-overflow: ellipsis и white-space: nowrap — полный рецепт усечения одной строки в одном классе. Для нескольких строк line-clamp-<n> (например, line-clamp-3 или line-clamp-none для отключения) генерирует трио на основе -webkit-box. Утилиты line-clamp входят в ядро Tailwind начиная с версии v3.3; текущий стабильный релиз — v4.3.3 (июль 2026 года), так что устанавливать ничего дополнительно не нужно.

<p class="truncate">Одна строка, обрезанная с многоточием…</p>
<p class="line-clamp-3">Несколько строк, ограниченных тремя…</p>

Внутри flex- или grid-дочернего элемента добавьте min-w-0 — утилитарный эквивалент исправления через min-width: 0.

Доступность: CSS-усечение против JS-усечения

Поскольку CSS-усечение носит исключительно презентационный характер, полная строка остаётся в DOM, и программы экранного доступа читают её целиком — без необходимости в aria-label. Это принципиальное отличие от усечения средствами JavaScript: подход с text.substring(0, 50) перезаписывает DOM-узел, и обрезанный текст исчезает для всех, включая вспомогательные технологии, — если только вы отдельно не сохраните его с помощью атрибута title или aria-label.

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

<span class="truncate" title="Quarterly revenue report — EMEA region, Q3 2026">
  Quarterly revenue report — EMEA region, Q3 2026
</span>

Одно ограничение, которое стоит знать: многоточие -webkit-line-clamp не поддаётся настройке, а text-overflow к нему не применяется, поскольку это свойство влияет только на инлайновое переполнение. Если вам нужен нестандартный индикатор усечения для многострочного текста — это сигнал обратиться к другому паттерну, а не пытаться обойти ограничения clamp.

Используйте text-overflow: ellipsis, когда нужна одна строка, и трио line-clamp — когда нужно несколько; не забывайте про min-width: 0, как только элемент оказывается внутри flex или grid, и добавляйте title везде, где скрытый текст несёт смысловую нагрузку. Это охватывает паттерны, которые работают корректно, и три, которые незаметно ломаются.

Часто задаваемые вопросы

В чём разница между text-overflow: ellipsis и line-clamp?

Используйте text-overflow: ellipsis для усечения одной строки и line-clamp — для ограничения фиксированным числом строк. Усечение одной строки требует трёх совместных объявлений: white-space: nowrap, overflow: hidden и text-overflow: ellipsis. Многострочное усечение требует трио на основе -webkit-box плюс overflow: hidden и не реагирует на text-overflow вовсе, поскольку это свойство влияет только на инлайновое переполнение.

Почему усечение с ellipsis не работает внутри flexbox или grid?

min-width: auto flex- или grid-элемента по умолчанию не позволяет ему сжаться ниже ширины содержимого, поэтому элемент никогда не становится достаточно узким для переполнения, и text-overflow попросту нечего обрезать. Установка min-width: 0 на дочернем элементе переопределяет автоматический минимум и восстанавливает усечение. Применение overflow: hidden к дочернему элементу также снимает автоматический минимум. Это наиболее распространённая реальная ошибка усечения, поскольку CSS выглядит корректно в изоляции.

Безопасно ли использовать стандартный line-clamp без префикса в 2026 году?

Нет. Стандартизированный line-clamp без префикса определён в CSS Overflow Module Level 4, однако по состоянию на 2026 год MDN помечает его как не входящий в Baseline, поскольку он не работает в ряде наиболее широко используемых браузеров. Добавляйте его рядом с объявлениями -webkit-box, -webkit-box-orient и -webkit-line-clamp как прогрессивное улучшение, а не вместо них. Трио с префиксами по-прежнему остаётся безопасным для продакшна подходом.

Влияет ли CSS-усечение на доступность для программ экранного доступа?

Нет. CSS-усечение носит исключительно презентационный характер: полная строка остаётся в DOM, и программы экранного доступа читают её целиком без каких-либо aria-label. Проблему представляет усечение средствами JavaScript: подход с substring перезаписывает DOM-узел, удаляя обрезанный текст для всех, включая вспомогательные технологии, — если только вы не сохраните его с помощью атрибута title или aria-label. Для контента, несущего смысловую нагрузку, дополняйте CSS-усечение атрибутом title или элементом управления для разворачивания текста в любом случае.