От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок.
.line-clamp-3 { /* Обязательные объявления: */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /* Ограничиваем блок текста тремя строками */ -webkit-line-clamp: 3;
}Примечание. Убедитесь, что элемент не имеет (нижнего) отступа, чтобы не допускать визуализации текстовых строк за пределами границ. Если вокруг усеченного текста требуется отступ, примените отступ к родительскому элементу.
Свойство -webkit-line-clamp указывается в модуле CSS Overflow (раздел 5.1.1.) И уже поддерживается во всех основных браузерах, кроме Firefox, реализация недавно появилась в Firefox Nightly и может появиться в Firefox уже в июле (в версии 68).
Источник: https://webplatform.news
Редакция: Команда webformyself.