Элегантная обрезка текста: забудь про JS-костыли и «градиенты смерти»
Признайся, сколько раз ты проклинал макеты, где дизайнер нарисовал идеальные карточки товаров с текстом ровно в три строчки? В реальности же туда прилетает либо «Война и мир», либо одно слово, и вся твоя сетка разъезжается, как старые кроссовки. Раньше мы либо мучили бэкенд, чтобы он обрезал строку (ломая SEO и смысл), либо городили жуткие скрипты, которые считали высоту блока в пикселях.
Сегодня мы разберем, как решить эту проблему одной левой, используя нативный CSS, который работает стабильно, предсказуемо и не нагружает браузер лишними вычислениями. Садись поудобнее, сейчас объясню, как это работает «под капотом».
Как мы страдали раньше
До того как современные стандарты доползли до всех браузеров, верстальщики напоминали алхимиков. Самый популярный хак — установка max-height блоку с фиксированным line-height и наложением псевдоэлемента ::after с градиентом от прозрачного к фоновому цвету в конце. Выглядело это дешево: текст мог обрезаться на середине буквы, а если фон был не однотонным, магия сразу превращалась в тыкву.
Другой «костыль» — использование white-space: nowrap. Но это работало только для одной строки. Как только нам нужно было обрезать три или пять строк, начиналась боль. Если ты работаешь над сложным интерфейсом с кучей таких карточек, рекомендую также глянуть, как оптимизировать рендеринг с помощью content-visibility, чтобы браузер не поперхнулся при отрисовке длинных списков.
Как делать правильно в 2026 году
На дворе 2026 год (по крайней мере, в наших сердцах), и стандарт line-clamp наконец-то стал общепризнанным каноном. Несмотря на то что свойства все еще носят префикс -webkit-, они поддерживаются абсолютно всеми актуальными браузерами. Это тот случай, когда старый черновик спецификации стал де-факто стандартом индустрии.
Секрет успеха — в связке трех свойств. Мы превращаем элемент в гибкий контейнер особого типа (box), задаем ему вертикальную ориентацию и указываем количество строк. Если ты верстаешь карточки, где помимо текста есть и фотографии, не забудь изучить, как делать идеальные изображения со свойствами object-fit и object-position, чтобы визуальная часть не уступала текстовой по аккуратности.
Готовый сниппет кода
Просто скопируй этот класс и применяй его к любому текстовому блоку. Это база, которая должна быть в каждом проекте.
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Количество строк, которые нужно оставить */
overflow: hidden;
}
В этом примере текст будет аккуратно обрезан на третьей строке с автоматическим добавлением многоточия в конце. Никакого JS, никаких лишних DOM-узлов.
Частая ошибка новичков
Самый частый факап, который я вижу на ревью у мидлов — это попытка задать жесткую высоту height или min-height для зажатого блока. Запомни: свойство -webkit-line-clamp само управляет тем, какой объем контента показать. Если ты задашь высоту вручную, и она окажется больше, чем занимают разрешенные строки, у тебя внизу появится пустое пространство. Если меньше — текст просто «схлопнется».
Вторая ошибка — забыть про overflow: hidden. Без него магии не случится: браузер поймет, где нужно поставить многоточие, но остальной текст радостно вывалится за пределы блока и налезет на соседние элементы. Всегда держи эти свойства в связке.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!