Как обрезать длинный текст многоточием в CSS — пошагово

Классика: заголовок карточки длиннее самой карточки. Ты гуглишь, находишь text-overflow: ellipsis, вставляешь — и ничего не происходит. Текст как вылезал, так и вылезает.

Это не баг. text-overflow умеет только одно: решать, как показать уже вылезающий текст. Заставить его вылезти и обрезаться — задача двух других свойств. Поэтому многоточие работает всегда в компании из трёх строк, а не одной.

Ниже — рабочие рецепты: для одной строки, для нескольких и для случая, когда текст живёт внутри flex.

Шаг 1. Одна строка

Три свойства, все обязательны:

.title {
  overflow: hidden;      /* разрешаем прятать лишнее */
  white-space: nowrap;   /* запрещаем перенос — текст выходит за край */
  text-overflow: ellipsis; /* показываем многоточие вместо обрыва */
}

Логика по шагам: white-space: nowrap не даёт тексту переноситься, поэтому он выходит за границу блока. overflow: hidden прячет то, что вышло. И только теперь text-overflow: ellipsis заменяет обрыв на многоточие.

Выкинь любое из трёх — сломается. Без nowrap текст просто перенесётся на новую строку, обрезать будет нечего. Без overflow: hidden он вылезет поверх соседей.

Ещё блоку нужна причина упереться в границу: фиксированная ширина, max-width или роль колонки в сетке. Свободный блок подстроится под текст, и обрезать снова будет нечего.

Шаг 2. Несколько строк

Если нужно показать три строки и оборвать — понадобится другой набор:

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

Да, с префиксом -webkit-, и да, это выглядит как копипаста из 2013 года. Но это рабочий вариант на сегодня: беспрефиксное свойство line-clamp пока не поддерживается основными браузерами без флага, а префиксная тройка работает в Chrome, Firefox и Safari уже много лет.

Важный нюанс: эти три свойства работают только вместе. MDN отмечает, что их взаимозависимость специально описана в спецификации и поддержку не уберут. Так что писать -webkit- тут не стыдно.

overflow: hidden снова обязателен: без него многоточие после третьей строки появится, а сам текст продолжит отображаться дальше.

Шаг 3. Если текст внутри flex или grid

Самая частая причина «сделал всё по инструкции — не работает». Элемент внутри flex или grid по умолчанию не сжимается уже своего содержимого: его минимальная ширина равна ширине самого длинного слова, а не нулю.

Лечится одной строкой на обрезаемом элементе:

.title { min-width: 0; }

Для колонок грида тот же приём выглядит как grid-template-columns: minmax(0, 1fr) вместо 1fr.

Шаг 4. Отдай полный текст

Обрезка — это визуальный приём. Текста, который скрылся, для человека больше не существует, и особенно обидно это в ссылках и заголовках.

Минимум: положи полный текст в атрибут title, чтобы он всплывал по наведению. Лучше — продумай, где пользователь увидит вариант целиком: в карточке товара это страница товара, в списке писем — само письмо.

И проверь себя на мобильном: то, что влезало в 1440 пикселей, на телефоне превратится в «Как выбрать…» без смысла. Общий чек-лист — как сделать сайт удобным на телефоне.

Почему это лучше, чем резать строку в коде

Соблазн велик: взять первые 60 символов, приклеить многоточие и забыть. Но разница тут принципиальная.

CSS-обрезка — чисто визуальная. В разметке остаётся полный текст: его найдёт поиск по странице, скопирует пользователь, прочитает программа чтения с экрана, увидит поисковый робот. Изменилась ширина блока — обрезка пересчиталась сама, без твоего участия.

Обрезка в коде реально выбрасывает текст. Дальше начинается: на широком экране место есть, а строка всё равно обрублена; в карточке обрывается название товара; слова не находятся поиском по странице. Плюс считать символы бесполезно — «Ш» и «i» занимают разную ширину, поэтому шестьдесят символов в одной карточке влезут, а в соседней нет.

Правило простое: обрезать визуально — в CSS. Обрезать по-настоящему (например, укоротить длинное описание перед отправкой в модель) — в коде.

Что получится

Заголовок в карточке держится в одну строку и заканчивается многоточием ровно по границе. Описание обрывается после третьей строки — все карточки в ряду одинаковой высоты, сетка не прыгает. Полный текст доступен по наведению и на странице элемента.

Почему многоточие не появляется?

Проверь три вещи по порядку: есть ли все три свойства, есть ли у блока ограничение по ширине и не лежит ли он внутри flex без min-width: 0. Если и это не помогло — возможно, стиль вообще не доехал: почему CSS не применяется.

Писать -webkit- в 2026 году — это нормально?

Для многострочной обрезки — да. Беспрефиксный line-clamp ещё не добрался до стабильных версий браузеров, а связка из трёх -webkit- свойств зафиксирована в спецификации и продолжит работать.

Можно ли обрезать текст в середине?

Средствами CSS — нет, многоточие ставится по краю строки. Если нужно «начало…конец» (например, для длинных имён файлов), придётся резать строку в JavaScript. В Tailwind, кстати, для обоих рецептов есть готовые классы — truncate и line-clamp-3; про разницу подходов — Tailwind против чистого CSS. А сколько строк поместится до обрезки, зависит от высоты строки.