Функция CSS для усечения многострочного текста была реализована в Firefox

Дата публикации: 2019-06-03

От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок.

.line-clamp-3 {
  /* Обязательные объявления: */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* Ограничиваем блок текста тремя строками */
  -webkit-line-clamp: 3;
}

.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).

Источник: //webplatform.news

Редакция: Команда webformyself.

Метки: css