Html2canvas: word-wrap：break-wordが機能していません

本当にword -wrap：break-workを使用していますか？ たとえば、オウムをオウムに変えたり、崇拝を腰に変えたりする場合、それは本当に悪いことです。 私はまだそれの使用可能な使用法を見つけていませんが、max-fontやcssのサイズに強制するようなものがないときは魅力的です。

私は知っていますが、この機能は私のサービスにとって非常に必要です。

ユーザーの見解は
aaa
aaa
aaa
しかし、キャプチャされた写真は
aaaaaaaaaaaaaaaaaaa

それはユーザーにとって非常に曖昧です。

この問題が発生しています。 単語が使用可能な幅より長く、自動的に分割する必要がある場合にブレークワードを使用するhtml/textエディターを使用しています。 letterRenderingを有効にしてhtml2canvasを使用した後に表示されるレンダリングは、一致しません。 多くの場合、テキストの行は、折り返しをまったく行わずに、本来よりも1行下にレンダリングされます。

私たちも同じ問題に直面しています。

@savokissオプションが指定されている場合、自動置換を行うプルリクエストを作成できますか？

私は間違った問題に答えたかもしれません、これが私の解決策です＃83
@ hanc1208私の解決策は上記の問題に対するものであり、このリポジトリのソースコードを編集する必要はありません。

同じ質問があります

この問題に関するニュースはありますか？ テストには、最新バージョンのhtml2canvas.jsファイルを使用しましたが、それでも同じ問題が発生します:(

この問題を実際にテストしたかったのですが、実際、公式ページのテストコンソールでも再現されているようです。 http://mariusbike83.wix.com/test1にある非常に単純なWebページを作成しました。 このページには、一部のフィールドと非常に長い文字列（分割するスペースなし）のテキスト領域のみが含まれています。 これをhtml2canvasライブラリでレンダリングすると、文字列が1行になっていることがわかります。

誰かがこの問題の解決策を見つけましたか？

（ところで、公式のテストコンソールは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ベータ版ではletterRenderingも機能しないことを確認できます。 古い0.4.1バージョンでは動作するようですが、ベータ版では動作しません。

@ 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-毎日あなたはPRをするべきです

@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時にここで自分自身を見つけるのですか？

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

これで段落は見栄えが良くなり、html2canvasが撮ったスクリーンショットはOKです。

もう1つのこと：段落要素には次のcssルールが必要です。

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

気をつけて