Html2canvas: word-wrap:break-word 不工作

你真的在使用 word -wrap:break-work 吗？ 例如，当它把鹦鹉变成鹦鹉或崇拜变成恶作剧时，这真的很糟糕。 我还没有找到它的可用用途，但是当没有诸如 max-font 之类的东西或在 css 中强制缩小大小时，它很诱人。

我知道，但是这个功能对我的服务来说是非常必要的。

用户的看法是
啊啊啊
啊啊啊
啊啊啊
但是拍摄的图片是
啊啊啊啊啊啊啊

这对用户来说是非常模棱两可的。

我们遇到了这个问题。 我们正在使用 html/文本编辑器，当单词长于可用宽度并且必须自动中断时，该编辑器使用断词。 我们在使用启用了 letterRendering 的 html2canvas 后看到的渲染不匹配。 很多时候，文本行比它应该被渲染的更下一行，根本没有任何换行。

我们也面临同样的问题。

@savokiss如果指定了选项，您可以创建自动替换的拉取请求吗？

我可能会回答错误的问题，这是我的解决方案 #83
@hanc1208我的解决方案是针对上面的问题，不需要编辑这个 repo 的源代码。

我有同样的问题

有关于这个问题的消息吗？ 我使用了最新版本的 html2canvas.js 文件进行测试，但我仍然遇到同样的问题 :(

我想真正测试这个问题，实际上即使使用官方页面上的测试控制台，它似乎也被复制了。 我创建了一个非常简单的网页，位于http://mariusbike83.wix.com/test1。 此页面仅包含一些字段和一个带有很长字符串的文本区域（没有空格将其分开）。 当它使用 html2canvas 库呈现时，您会注意到该字符串是单行的。

有没有人找到解决这个问题的方法？

（顺便说一句，官方测试控制台位于 https://html2canvas.hertzen.com/screenshots.html 并确保取消选中“禁用 javascript”复选框）

对于我的应用程序，我从 0.5.0-alpha1 降级到 v0.4.1 并且它似乎可以工作，所以我将使用那个版本。 我没有彻底测试过，但可以肯定长字符串正确包装。 试试这个，看看它是否能解决问题； 尽管由于版本的巨大差异，在此过程中可能会引入其他错误。

如何通过 jquery 手动打破带有 span 标签的每个字符？

letterRendering 设置为 true 对我有用....
html2canvas 选项文档： https ://html2canvas.hertzen.com/documentation.html

如果不使用v0.4.1 ...就没有办法解决这个问题吗？

嗨@SatoshiKawabata ，您是否尝试过使用@wayrex 建议的选项letterRendering: true ？

@eKoopmans我试过了，但也没有用。

@eKoopmans @SatoshiKawabata我可以确认在 beta te letterRendering 上也不起作用。 似乎在旧的 0.4.1 版本上它可以工作，但在 beta 号上。

@gelinger777我想通过npm使用它，所以我添加了一个问题 #1143。 我应该等。

我已经解决了。

改变

var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
   return punycode.ucs2.encode([character]);
});

到

var textList = characters.map(function(character) {
  return punycode.ucs2.encode([character]);
});

@love-everyday 你应该做一个公关

@CodyMoore240已在1.0.0-alpha.1中解决

谢谢你，我会分叉的。

我通过在需要中断之前添加<i></i>来修复它，它看起来像

<p class="punch-card-info-word">
         <i></i>statutestatutestatutestatutestatutestatutestatutestatutestatutestatutestatutestatute
</p>

这个问题始于 5 年前......并且还在计数：
我想与全世界分享我找到了绕过这个烦人错误的方法，
我从 textarea 输入中获取了文本：

var txt = modal_dialog_text_area_input.value;
然后我用以下标记替换了每个空格，以保留空格。 哪个 html2canvas 没有做到，以及为什么我们发现自己在凌晨 3:00 在这里，而不是在床上：

paragraphElement.innerHTML = txt.replace(/\s/g, '<span> </span>');

现在该段落看起来不错，html2canvas 截取的屏幕截图也可以。

另一件事：段落元素必须具有以下css规则：

    word-break: break-word;
    white-space: normal;

大家保重