niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.58k stars 4.81k forks source link

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

Open shadoo77 opened 4 years ago

shadoo77 commented 4 years ago

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:

captain100 commented 3 years ago

I have the same problem. help! help! help!

songsongzheng commented 3 years ago

Same problem, please help

n1ks0N commented 3 years ago

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 */
}
shadoo77 commented 3 years ago

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 !

maiconcarraro commented 1 year ago

+1 I'd like this support, had same issue.

quocuyvan commented 1 year ago

I have the same problem.