html2canvas doesn't work with display: -webkit-box

I’m trying to embed posts of my app, and then making screenshot of the embeded post, in the screenshot of the post i want to show only 5 lines of content text and 3 dotes at the end , therefor i’m using this code of CSS :

.limit-text-to-5-lines {
			display: -webkit-box;
  		-webkit-line-clamp: 5;
  		-webkit-box-orient: vertical;  
  		overflow: hidden;
		}

But i see nothing in content section of the screenshot, i tried without display: -webkit-box; it shows me the text ,so it’s a conflicts , and not works, please some help!

Specifications:

• html2canvas version tested with: react
• Browser & version: all
• Operating system: mac

[n1ks0N]

content: “”; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; /* use necessary background-color */

first of all thanks for your comment, but i already have this code , the problem here that i want the 3 dotes right after the last word, but the location of those 3 dotes in this case are always located at the end of the last line even though you have just 2 words in the line so you 'll have a huge space between the last word and the 3 dotes !

so, it’s better than nothing) what’s stopping u from changing css-code for urself?

[n1ks0N]

CSS code instead of line-clamp:

.block-with-text {
  overflow: hidden;
  line-height: 1.2em; /* use this value for height */
  max-height: 3.6em;  /* max-height = line-height (1.2) * number of lines (3) */
  text-align: justify;
}

If you want dots at the end, like line-clamp:

.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em; 
  text-align: justify;  
  padding-right: 1em;
}
.block-with-text:before {
  content: '…';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white; /* use necessary background-color */
}