Генератор обрізання тексту CSS

Створіть правило CSS, яке обрізає текст після встановленої кількості рядків з багатокраплям або затуханням.

Режим обрізанняКількість рядківВисота рядкаЗатемнити останній рядок замість багатокрапляДодати fallback для старих браузерівВключити еквівалент TailwindТекст для перегляду

Вихід

Генератор обрізання тексту 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 файл або відправити прямо в інший інструмент.

FAQ

Яка різниця між обрізанням в один рядок та у кілька рядків?

Один рядок використовує text-overflow: ellipsis з white-space: nowrap та працює у всіх браузерах. Кілька рядків використовують -webkit-line-clamp для обрізання після потрібної кількості рядків, що вимагає налаштування display: -webkit-box, яке створює цей інструмент.

Чому опція затухання видаляє -webkit-line-clamp?

Gradient затухання вимагає фіксований max-height та позиціонований pseudo-element, а не box model line-clamp, тому інструмент переходить на правило на основі max-height коли затухання включено — для обох режимів одного та кількох рядків.

Мені все ще потрібен fallback для сучасних браузерів?

Усі сучасні браузери підтримують -webkit-line-clamp, тому fallback в основному захищає старі або незвичайні браузери. Його безпечно залишати включеним: він застосовується лише всередині блоку "@supports not", який сучасні браузери ігнорують.

Наскільки точний перегляд?

Це оцінка на основі середної довжини рядка, а не вимірювання вашого реального шрифту або ширини контейнера. Використовуйте його для перевірки, правильно ли виглядає вибрана кількість рядків, потім перевірте реальний результат на вашій сторінці.

Мій текст перегляду завантажується кудись?

Ні. CSS та перегляд генеруються повністю у браузері — нічого, що ви вводите, не відправляється на сервер.

Генератор обрізання тексту CSS

Пов'язані інструменти

Генератор обрізання тексту CSS

FAQ