The line-clamp property interferes with the translation of html into canvas. How to fix?

Question

css

If you add a set of css properties to the text to cut off the text (to leave ... at the end):

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

Then when translating from HTML to Canvas using html2canvas , the text in the resulting canvas is not displayed.
This problem has already been encountered and it is in issues .

It is necessary for me that the text after 3 lines is cut off and it can be translated into canvas. In this case, is it necessary to calculate the length of strings in JS and cut it yourself? Or does someone know a simpler solution?

Answer 1

Decision Dmitry Khristoev

Simplified solution that worked for me:

.block-with-text {
  overflow: hidden;
  line-height: 1.2em;
  max-height: 3.6em;  /* max-height = line-height (1.2) * кол-во строк (3) */
  text-align: justify;
}