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

Question

[n1ksON]

Если добавить тексту набор css-свойств для обрезания текста (чтобы в конце осталось ...):

p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

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

Мне необходимо, чтобы текст после 3х строк обрезался и его можно будет перевести в canvas. В таком случае, необходимо на JS посчитать длину строк и обрезать самостоятельно? Или кто-то знает более простое решение?

Comments

[Froggyweb]

обрежь на js

[Дмитрий Христоев]

https://jsfiddle.net/haoss/au50xp6r/

[n1ksON]

Дмитрий Христоев, супер, перестарались правда, мне эти точки вообще наоборот не нужны были. Напишите решение, отмечу как правильное

Answer 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;
}