html2canvas text-overflow not working

[jayeshcspl]

• html2canvas version tested with: html2canvas 1.0.0-rc.5
• Browser & version: Google Chrome Version 81.0.4044.122 (Official Build) unknown (64-bit)
• Operating system: Ubuntu 16.04

I have applied following css to limit the title sting. it works in html but not working Generated image using html2canvas.

text-overflow: ellipsis; property is not working... Any alternative way so I can limit the text in generated image?

.content_overlay .container .staycation_title { font-size: 1.5em; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; margin-left: auto; margin-right: auto; }

[fangoo]

Is it solved? I had the same problem

[jayeshcspl]

no "text-overflow" property is not supported by html2canvas.

[YufJi]

i resolved this problem by measuring text's width and manual cutting text. tip: it only works on one-row-text case.

// step 1:  create a function that can get width of the text
const measureText = (function () {
    const canvas = document.createElement('canvas');
    canvas.id = 'measure-canvas';
    canvas.width = 500;
    canvas.height = 100;

    return (params) => {
        const { font, text } = params;
        const ctx = canvas.getContext('2d');

        ctx.font = `${font} ${['Helvetica Neue', 'Helvetica', 'PingFang SC'].join(' ')}`;

        const { width } = ctx.measureText(text);

        return {
            width,
        };
    };
}());

// step 2: create the cutString function
const cutString = (str, font, maxWidth) => {
       const  { width } = measureText({ text: str, font });
       if (width <= maxWidth) {
          // use the text
          return str;
       } 

        let ret = '';
        for (let i = str.length - 1; i >= 0; i--) {
            const text = `${str.substring(0, i)}...`;
            const { width: textWidth } = measureText({
                text,
                font,
            });

            if (textWidth <= maxWidth) {
                ret = text;
                break;
            }
        }

        return ret;
    };

// step 3:  get the text container's width and invoke cutString
const containerDom = document.querySelector('#id');
const maxWidth = containerDom.offsetWidth;

// cut text
const finalText = cutString('abcdefg and so on', 'bold 14px',  maxWidth);

[returnjinx]

I also have the same problem. How do I compatible？