"word-break: break-word" 不会反映在 html2canvas 创建的图像中

Question

我正在使用 html2canvas 将 html 视图下载为图像。

但是，如果有一个没有空格的长文本，html 会使用 css (word-break: break-word) 在下一行正确呈现它，但这不会反映在生成的图像中。文本保持在一行并被剪裁。

尝试了其他 CSS 属性，例如：

word-wrap: break-word;
overflow-wrap: break-word;

还是不行

查看下图以了解预期结果与实际结果

https://i.stack.imgur.com/QfuVT.png

Answer 1

尝试在 html2canvas 方法中添加 letterRendering:true 属性。

html2canvas(document.getElementById(divId), {
    onrendered: function (canvas) {
        },
    letterRendering:true
});

Answer 2

对于像我这样需要 word-break: break-word; 而不是 word-break: break-all; 的人来说，添加 overflow-wrap: break-word; 除了 Dhananjay Chaudhari 所说的似乎有效。