Html2canvas: word-wrap:break-word no funciona

¿Realmente estás usando word -wrap:break-work? Eso es realmente malo cuando convierte al loro en loro o la adoración en adoración, por ejemplo. Todavía tengo que encontrar un uso utilizable para él, pero es tentador cuando no existe tal cosa como fuente máxima o reducción de tamaño en css.

Lo sé, pero esta función es muy necesaria para mi servicio.

La vista del usuario es
aaa
aaa
aaa
Pero la imagen capturada es
aaaaaaaaaaaaaaaaaaaa

Es muy ambiguo para los usuarios.

Estamos teniendo este problema. Estamos usando un editor de html/texto que usa palabras de ruptura cuando una palabra es más larga que el ancho disponible y tiene que dividirse automáticamente. La representación que vemos después de usar html2canvas con letterRendering habilitado no coincide. A menudo, la línea de texto se representa una línea más abajo de lo que debería sin ningún ajuste.

también nos enfrentamos al mismo problema.

@savokiss , ¿puede crear una solicitud de extracción que se reemplace automáticamente si se especifica la opción?

Podría responder el problema equivocado, aquí está mi solución #83
@ hanc1208 Mi solución es para el problema anterior y no es necesario editar el código fuente de este repositorio.

tengo la misma pregunta

¿Alguna noticia sobre este tema? Usé, para probar, la última versión del archivo html2canvas.js y sigo teniendo el mismo problema :(

Realmente quería probar este problema y, de hecho, parece reproducirse incluso con la consola de prueba en la página oficial. Creé una página web muy simple, ubicada en http://mariusbike83.wix.com/test1. Esta página contiene solo algunos campos y un área de texto con una cadena muy larga (sin espacios para dividirla). Cuando esto se represente con la biblioteca html2canvas, notará que la cadena tiene una sola línea.

¿Ha encontrado alguien una solución a este problema?

(Por cierto, la consola de prueba oficial se encuentra en https://html2canvas.hertzen.com/screenshots.html y asegúrese de desmarcar la casilla de verificación "Deshabilitar javascript")

Para mi aplicación, bajé de 0.5.0-alpha1 a v0.4.1 y parecía funcionar, así que solo voy a usar esa versión. No lo he probado a fondo, pero seguro que largas cadenas de caracteres se envuelven correctamente. Pruebe esto para ver si resuelve el problema; aunque pueden introducirse otros errores en el proceso debido a las grandes diferencias en las versiones.

¿Qué tal romper manualmente cada carácter con la etiqueta span por jquery?

letterRendering establecido en verdadero funcionó para mí ...
Documentos de opciones de html2canvas: https://html2canvas.hertzen.com/documentation.html

¿No hay forma de resolver este problema sin usar v0.4.1 ...?

Hola @SatoshiKawabata , ¿intentaste usar la opción letterRendering: true sugerida por @wayrex?

@eKoopmans Lo intenté pero tampoco funcionó.

@eKoopmans @SatoshiKawabata Puedo confirmar que en beta te letterRendering tampoco funciona. Parece que en la versión anterior 0.4.1 funciona, pero en la versión beta no.

@gelinger777 Quiero usar esto por npm así que agregué un problema #1143. debería esperar

lo habia solucionado

cambiar

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

para

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

@love-everyday deberías hacer una PR

@ CodyMoore240 Ya se resolvió en 1.0.0-alpha.1

Gracias voy a bifurcar.

Lo arreglé agregando <i></i> antes de que la palabra se rompa, y parece que

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

Este problema empezó hace 5 años... y contando:
Me gustaría compartir con el mundo que encontré una manera de evitar este molesto error,
Tomé el texto de una entrada de área de texto:

var txt = modal_dialog_text_area_input.value;
luego reemplacé cada espacio en blanco con el siguiente marcado, para preservar los espacios en blanco. Qué falla en hacer html2canvas y por qué nos encontramos a las 3:00 a. m. de la mañana aquí, en lugar de estar en la cama:

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

Ahora el párrafo se ve bien y la captura de pantalla que toma html2canvas está bien.

Otra cosa: el elemento de párrafo debe tener las siguientes reglas css:

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

Cuídense todos