Html2canvas: word-wrap: break-word ne fonctionne pas

Utilisez-vous vraiment word -wrap:break-work ? C'est vraiment mauvais quand cela transforme le perroquet en perroquet ou l'adoration en pire par exemple. Je n'ai pas encore trouvé d'utilisation utilisable, mais c'est tentant quand il n'y a pas de max-font ou force down to size en css.

Je sais mais cette fonction est très nécessaire pour mon service.

La vue de l'utilisateur est
aaa
aaa
aaa
Mais l'image capturée est
aaaaaaaaaaaaaaaaa

C'est très ambigu pour les utilisateurs.

Nous avons ce problème. Nous utilisons un éditeur html/texte qui utilise un mot de rupture lorsqu'un mot est plus long que la largeur disponible et doit être rompu automatiquement. Le rendu que nous voyons après avoir utilisé html2canvas avec letterRendering activé ne correspond pas. Souvent, la ligne de texte est rendue une ligne plus loin qu'elle ne le devrait sans aucun retour à la ligne.

nous sommes également confrontés au même problème.

@savokiss pouvez-vous créer une demande d'extraction qui se remplace automatiquement si l'option est spécifiée ?

J'ai peut-être répondu au mauvais problème, voici ma solution # 83
@ hanc1208 Ma solution concerne le problème ci-dessus et il n'est pas nécessaire de modifier le code source de ce référentiel.

j'ai la même question

Des news sur ce problème ? J'ai utilisé, pour les tests, la dernière version du fichier html2canvas.js et j'ai toujours le même problème :(

Je voulais vraiment tester ce problème et en effet il semble se reproduire même avec la console de test sur la page officielle. J'ai créé une page Web très simple, située à http://mariusbike83.wix.com/test1. Cette page ne contient que quelques champs et une zone de texte avec une très longue chaîne (sans espaces pour la séparer). Lorsque cela est rendu avec la bibliothèque html2canvas, vous remarquerez que la chaîne est sur une seule ligne.

Quelqu'un a-t-il trouvé une solution à ce problème?

(Btw, la console de test officielle se trouve à https://html2canvas.hertzen.com/screenshots.html et assurez-vous de décocher la case "Désactiver javascript")

Pour mon application, je suis passé de 0.5.0-alpha1 à v0.4.1 et cela semblait fonctionner, donc je vais simplement utiliser cette version. Je n'ai pas testé à fond, mais il est certain que de longues chaînes de caractères sont correctement enveloppées. Essayez ceci pour voir si cela résout le problème ; bien que d'autres bogues puissent être introduits dans le processus en raison de grandes différences dans les versions.

que diriez-vous de casser manuellement chaque caractère avec la balise span par jquery?

letterRendering défini sur true a fonctionné pour moi ....
documentation des options html2canvas : https://html2canvas.hertzen.com/documentation.html

N'y a-t-il aucun moyen de résoudre ce problème sans utiliser v0.4.1 ... ?

Bonjour @SatoshiKawabata , avez-vous essayé d'utiliser l'option letterRendering: true suggérée par @wayrex ?

@eKoopmans J'ai essayé ça mais ça n'a pas marché non plus.

@eKoopmans @SatoshiKawabata Je peux confirmer que sur la beta te letterRendering ne fonctionne pas non plus. Il semble que sur l'ancienne version 0.4.1, cela fonctionne mais sur la version bêta non.

@ gelinger777 Je veux utiliser ceci par npm donc j'ai ajouté un numéro #1143. Je devrais attendre.

Je l'avais résolu.

changement

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

pour

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

@love-everyday tu devrais faire un PR

@ CodyMoore240 Il a déjà été résolu en 1.0.0-alpha.1

Merci je vais bifurquer.

Je l'ai corrigé en ajoutant <i></i> avant que le mot ne soit cassé, et ça ressemble à

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

Ce problème a commencé il y a 5 ans... et compte :
J'aimerais partager avec le monde que j'ai trouvé un moyen de contourner ce bug ennuyeux,
J'ai pris le texte d'une entrée textarea :

var txt = modal_dialog_text_area_input.value;
puis j'ai remplacé chaque espace par le balisage suivant, afin de préserver les espaces. Ce que html2canvas ne parvient pas à faire, et pourquoi nous nous retrouvons à 3h00 du matin ici, au lieu d'être au lit :

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

Maintenant, le paragraphe a l'air bien et la capture d'écran prise par html2canvas est OK.

Autre chose : l'élément paragraphe doit avoir les règles CSS suivantes :

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

Prenez soin de vous tous