Генератор обрезки текста CSS
Создайте правило CSS, которое обрезает текст после установленного количества строк с многоточием или затуханием.
Генератор обрезки текста CSS
Заголовки карточек, описания товаров и превью комментариев — все требуют одного и того же приема: показать несколько строк текста и аккуратно обрезать остальное вместо того, чтобы длинный абзац портил верстку. Этот генератор создает CSS правило, готовое вставить в стиль как класс ".line-clamp".
Выберите режим одной строки для обрезки в одну строку — классическую комбинацию "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" для заголовков и ячеек таблиц — или режим многих строк, который использует "-webkit-line-clamp" для обрезки после нужного количества строк с учетом выбранного межстрочного расстояния. Включите затухание для смягчения последней строки в фон gradient вместо жесткого многоточия — это выглядит лучше над изображением или цветной карточкой. Fallback добавляет блок "@supports", чтобы браузеры без поддержки line-clamp получили разумное ограничение max-height вместо полного текста, а опция Tailwind добавляет комментарий с соответствующим классом ("truncate" или "line-clamp-N").
Введите или вставьте предложение в поле предпросмотра — инструмент покажет, как текст разобьется на выбранное количество строк, чтобы вы могли проверить правильность перед внедрением. Оценка основана на средней длине читаемой строки, а не на измерении реальных шрифтов и контейнеров — это ориентир для выбора разумного количества строк, не точный пиксельный рендер.
Все работает локально в браузере: CSS генерируется по мере ввода, ничего не загружается, и вы можете скопировать результат, загрузить его как .txt файл или отправить прямо в другой инструмент.