html2canvas jspdf table data word-break not working

Question

I am trying to export some tables to pdf in my application. The export functionality works. However, if table data has some long text in it, it overflows into the other rows when it is exported. I have word-break:break-word for that data, but it is being ignored when exporting to PDF. I also have letterRendering set to true. Here is my function:

var data = document.getElementById('table');  
    html2canvas(data).then(canvas => {  
      // Few necessary setting options  
      var imgWidth = 208;   
      var pageHeight = 295;    
      var imgHeight = canvas.height * imgWidth / canvas.width;  
      var heightLeft = imgHeight;  

      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'mm', 'a4');  
      var position = 0;  
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
      pdf.save('table.pdf');
      letterRendering: true;
    });

Here is an image of part of the exported table that is showing the problem:

It looks fine on the webpage itself:

How should I modify my function to prevent this overflow from happening?

Answer 1

OK, so, I changed work-break:break-word to word-break:break-all and it is working perfectly now. Happy Coding!