@n1ksON
Интерн

Свойство line-clamp мешает переводу html в canvas. Как исправить?

Если добавить тексту набор css-свойств для обрезания текста (чтобы в конце осталось ...):
p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

То при переводе из HTML в Canvas с помощью html2canvas, текст в получившемся canvas не отображается.
С такой проблемой уже сталкивались и она есть в issues.

Мне необходимо, чтобы текст после 3х строк обрезался и его можно будет перевести в canvas. В таком случае, необходимо на JS посчитать длину строк и обрезать самостоятельно? Или кто-то знает более простое решение?
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
@n1ksON Автор вопроса
Интерн
Решение Дмитрий Христоев


Упрощённое решение, которое подошло мне:
.block-with-text {
  overflow: hidden;
  line-height: 1.2em;
  max-height: 3.6em;  /* max-height = line-height (1.2) * кол-во строк (3) */
  text-align: justify;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы