Html2canvas: Zeilenumbruch: Break-Wort funktioniert nicht

Verwenden Sie wirklich Word -Wrap: Break-Work? Das ist wirklich schlimm, wenn es zum Beispiel Papagei in Papagei oder Anbetung in Wors Hip verwandelt. Ich muss noch eine brauchbare Verwendung dafür finden, aber es ist verlockend, wenn es so etwas wie Max-Font oder Force Down to Size in CSS nicht gibt.

Ich weiß, aber diese Funktion ist für meinen Dienst sehr notwendig.

Die Sicht des Benutzers ist
aaa
aaa
aaa
Aber das aufgenommene Bild ist
aaaaaaaaaaaaaaaaa

Es ist für Benutzer sehr zweideutig.

Wir haben dieses Problem. Wir verwenden einen HTML-/Texteditor, der Break-Word verwendet, wenn ein Wort länger als die verfügbare Breite ist und automatisch gebrochen werden muss. Das Rendering, das wir nach der Verwendung von html2canvas mit aktiviertem letterRendering sehen, stimmt nicht überein. Oft wird die Textzeile eine Zeile weiter unten gerendert, als sie sollte, ohne dass überhaupt ein Zeilenumbruch erfolgt.

wir stehen auch vor dem gleichen Problem.

@savokiss können Sie eine Pull-Anforderung erstellen, die automatisch ersetzt wird, wenn die Option angegeben ist?

Ich habe vielleicht auf das falsche Problem geantwortet, hier ist meine Lösung Nr. 83
@ hanc1208 Meine Lösung ist für das obige Problem und es muss der Quellcode dieses Repos nicht bearbeitet werden.

Ich habe dieselbe Frage

Irgendwelche Neuigkeiten zu diesem Thema? Ich habe zum Testen die neueste Version der Datei html2canvas.js verwendet und habe immer noch das gleiche Problem :(

Ich wollte dieses Problem wirklich testen und tatsächlich scheint es sogar mit der Testkonsole auf der offiziellen Seite reproduziert zu werden. Ich habe eine sehr einfache Webseite erstellt, die sich unter http://mariusbike83.wix.com/test1 befindet. Diese Seite enthält nur einige Felder und einen Textbereich mit einer sehr langen Zeichenfolge (ohne Leerzeichen, um sie aufzuteilen). Wenn dies mit der html2canvas-Bibliothek gerendert wird, werden Sie feststellen, dass die Zeichenfolge einzeilig ist.

Hat jemand eine Lösung für dieses Problem gefunden?

(Übrigens, die offizielle Testkonsole befindet sich unter https://html2canvas.hertzen.com/screenshots.html und stellen Sie sicher, dass Sie das Kontrollkästchen „Javascript deaktivieren“ deaktivieren.)

Für meine Anwendung habe ich von 0.5.0-alpha1 auf v0.4.1 heruntergestuft und es schien zu funktionieren, also werde ich nur diese Version verwenden. Ich habe es nicht gründlich getestet, aber mit Sicherheit lange Zeichenketten richtig umbrochen. Probieren Sie dies aus, um zu sehen, ob es das Problem löst; obwohl andere Fehler aufgrund großer Unterschiede in den Versionen in den Prozess eingeführt werden können.

Wie wäre es, jedes Zeichen manuell mit dem Span-Tag von jquery zu unterbrechen?

letterRendering auf true gesetzt hat bei mir funktioniert....
Dokumentation zu html2canvas-Optionen: https://html2canvas.hertzen.com/documentation.html

Gibt es keine Möglichkeit, dieses Problem zu lösen, ohne v0.4.1 ... zu verwenden?

Hallo @SatoshiKawabata , hast du versucht, die von @wayrex vorgeschlagene Option letterRendering: true zu verwenden?

@eKoopmans Ich habe das versucht, aber es hat auch nicht funktioniert.

@eKoopmans @SatoshiKawabata Ich kann bestätigen, dass LetterRendering in der Beta-Version auch nicht funktioniert. Scheint auf der älteren Version 0.4.1 zu funktionieren, aber auf der Beta-Nr.

@gelinger777 Ich möchte dies von npm verwenden, also habe ich eine Ausgabe Nr. 1143 hinzugefügt. Ich sollte warten.

Ich hatte es gelöst.

Veränderung

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

zu

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

@love-Everyday solltest du eine PR machen

@CodyMoore240 Es wurde bereits in 1.0.0-alpha.1 behoben

Danke, ich werde abzweigen.

Ich habe es behoben, indem ich <i></i> vor dem Wort Break benötigt habe, und es sieht so aus

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

Diese Ausgabe begann vor 5 Jahren ... und zählt:
Ich möchte mit der Welt teilen, dass ich einen Weg gefunden habe, diesen lästigen Fehler zu umgehen,
Ich habe den Text aus einer Textarea-Eingabe genommen:

var txt = modal_dialog_text_area_input.value;
Dann habe ich jeden Leerraum durch das folgende Markup ersetzt, um Leerzeichen zu erhalten. Was html2canvas nicht kann und warum wir uns um 3:00 Uhr morgens hier statt im Bett befinden:

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

Jetzt sieht der Absatz gut aus und der Screenshot, den html2canvas macht, ist in Ordnung.

Noch etwas: Das Absatzelement muss die folgenden CSS-Regeln haben:

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

Pass auf dich auf