Привет! Меня зовут Денис, я автор в блоге Яндекс.Практикума, а также веду собственный блог о дизайне привычных вещей — Lorrrem. В этом материале разберём частый вопрос в интерфейсах: как корректно обрезать длинный текст и показать пользователю, что там ещё есть информация. Для решения этой задачи можно использовать «трункацию» и «эллипсис». И это не одно и то же.
Если эти понятия смешивать, легко получить недопонимание между дизайнером и разработчиком, а интерфейсы будут вести себя непредсказуемо.
Что такое трункация и что такое эллипсис
Трункация — это про логику
Трункация (от английского truncation) — это поведение текста: что происходит, когда строка не помещается в контейнер.
Она отвечает на вопросы:
- где текст обрывается: по ширине или по строкам?
- сколько символов показывать?
- какой паттерн использовать в конкретной ситуации?
Трункация — это правило, а не визуальный знак.
Эллипсис — это про визуальную индикацию
Эллипсис — это визуальный знак: те самые «…», которые показывают пользователю, что текст не закончился, а был скрыт.
Важно помнить:
- Эллипсис — не обязательный элемент трункации.
- Текст может быть обрезан без троеточий (жесткая обрезка), но пользователь это не поймёт, если не показать, что есть скрытая часть.
Примеры:
- «Очень длинный тек…» — трункация + эллипсис
- «Очень длинный тек» — трункация без эллипсиса
Где и как используется трункация
Давайте разбираться с реальными случаями.
Однострочная трункация
Текст ограничен одной строкой и шириной контейнера.
Это стандарт для:
- навигации,
- заголовков карточек,
- списков.
Варианты:
- с эллипсисом (…)
- без эллипсиса
Многострочная трункация (line clamp)
Здесь текст может занимать несколько строк, но после N строк — обрезается.
Это удобно для:
- описаний,
- карточек продуктов,
- превью статей.
Такой паттерн облегчает восприятие длинного текста, но всё равно может нуждаться в визуальной индикации (троеточие в конце).
Жёсткая обрезка по символам
Ограничение по количеству символов (например, 120) — это не визуальное, а логическое ограничение: правила для данных и контента.
Такой способ менее гибкий с точки зрения UX, потому что он не учитывает визуальное восприятие (разная ширина букв, переносы, языки).
Разные способы индикации скрываемого текста
Эллипсис в конце строки
Классический вариант — самый интуитивный.
Пользователь получает начало текста и видит, что он прерывается.
Эллипсис в середине строки
Это полезно, когда важно показать начало и конец, а середина не критична.
Типичные кейсы:
- пути и URL:
/users/admin/very-long-folder-name/file.json → /users/admin/…/file.json - ID и номера:
ORD-2026-01-15-89237465 → ORD-2026-…-7465
Эллипсис в начале строки
Редкий, но имеющий право на жизнь вариант — когда критично показать только окончание:
- части URL,
- важные окончания названий.
Когда эллипсис не нужен
В некоторых интерфейсах эллипсис может только мешать и визуально засорять интерфейс.
В таких случаях:
- текст просто обрезается по границе (cut off)
- или используется градиентный фейд — визуальный намёк, что текст уходит дальше за пределы контейнера
Градиентный фейд — это не приём с троеточием, а другой визуальный подход показать, что текст не полон.
Практические рекомендации
Чтобы исключить недопонимания в команде:
Когда вы говорите про логику — используйте термины:
- truncation — обрезка текста
- single-line truncation — обрезка текста в одну строку
- multi-line truncation — обрезка текста в несколько строк, к примере в две (можно сделать с эллипсом или фейдом)
Эти слова описывают что делать с текстом.
Когда вы говорите про визуальный результат — используйте:
- ellipsis — эллипсис
- end ellipsis — эллипсис в конце строки
- middle ellipsis — эллипсис в середине сроки
- ellipsis at start — эллипсис в начале строки
Эти термины описывают то, что видит пользователь.
Вывод
Если разделить термины в голове:
- трункация — это решение о том, где обрезается текст,
- эллипсис — это визуальный маркер, показывающий, что текст скрыт,
то взаимодействие в команде становится чище, а интерфейсы — понятнее пользователю.
Говорите точными словами — получайте предсказуемые результаты в дизайне и разработке.