Search code examples
csswkhtmltopdf

How to prevent text overflow (and fill the div instead) when converting html to pdf?


I'm using wkhtmltopdf to export some html pages to pdf. One of those pages is a "Business Model Canvas" that is filled with text.

The problem is, after the export, text inside each tile/panel of the canvas stays in 1 line, meaning it gets cut when it reaches the border of that div, instead of going to the next line, like the html page does.

This is what it looks like, html on the left and pdf on the right:

enter image description hereenter image description here

I tried to mess with some CSS properties like overflow, text-overflow, width or white-space, but I had no luck.

In theory, both the html and pdf share the same properties, I'm guessing the export happens too fast and the external css files don't load properly or something like that.

Either way, I could try some in-line css for the canvas template, if you have any suggestions besides the ones I tried.


Solution

  • After repeating the process again, made it work with white-space: normal;.

    Probably had something adding extra css to the same element before.