Html2canvas: word-wrap:break-word não está funcionando

Você está realmente usando word- wrap:break-work? Isso é muito ruim quando transforma papagaio em papagaio ou adoração em malditos, por exemplo. Ainda não encontrei um uso utilizável para isso, mas é tentador quando não existe max-font ou force down to size em css.

Eu sei, mas esta função é muito necessária para o meu serviço.

A visão do usuário é
aaa
aaa
aaa
Mas a imagem capturada é
aaaaaaaaaaaaaaaa

É muito ambíguo para os usuários.

Estamos com esse problema. Estamos usando um editor de html/texto que usa break-word quando uma palavra é maior que a largura disponível e precisa ser quebrada automaticamente. A renderização que vemos depois de usar html2canvas com letterRendering ativado não corresponde. Muitas vezes, a linha de texto é renderizada uma linha abaixo do que deveria, sem qualquer quebra.

também estamos enfrentando o mesmo problema.

@savokiss você pode criar uma solicitação pull que substitui automaticamente se a opção for especificada?

Eu posso ter respondido o problema errado, aqui está a minha solução # 83
@hanc1208 Minha solução é para o problema acima e não precisa editar o código-fonte deste repositório.

tenho a mesma pergunta

Alguma novidade sobre este assunto? Usei, para testar, a última versão do arquivo html2canvas.js e continuo com o mesmo problema :(

Eu queria realmente testar esse problema e, de fato, parece ser reproduzido mesmo com o console de teste na página oficial. Criei uma página muito simples, localizada em http://mariusbike83.wix.com/test1. Esta página contém apenas alguns campos e uma área de texto com uma string muito longa (sem espaços para dividi-la). Quando isso é renderizado com a biblioteca html2canvas, você notará que a string é de uma linha.

Alguém encontrou a solução para este problema?

(Btw, o console de teste oficial está localizado em https://html2canvas.hertzen.com/screenshots.html e certifique-se de desmarcar a caixa de seleção "Desativar javascript")

Para meu aplicativo, fiz downgrade de 0.5.0-alpha1 para v0.4.1 e pareceu funcionar, então vou usar essa versão. Eu não testei completamente, mas com certeza longas seqüências de caracteres embrulhados corretamente. Tente isso para ver se resolve o problema; embora outros bugs possam ser introduzidos no processo devido a grandes diferenças nas versões.

que tal quebrar manualmente cada caractere com tag span por jquery?

letterRendering definido como true funcionou para mim ....
documentos de opções do html2canvas: https://html2canvas.hertzen.com/documentation.html

Não há como resolver esse problema sem usar v0.4.1 ...?

Oi @SatoshiKawabata , você tentou usar a opção letterRendering: true sugerida por @wayrex?

@eKoopmans Eu tentei isso, mas também não funcionou.

@eKoopmans @SatoshiKawabata Posso confirmar que no beta te letterRendering também não funciona. Parece que na versão 0.4.1 mais antiga funciona, mas na versão beta não.

@gelinger777 Eu quero usar isso por npm então adicionei um problema #1143. Eu deveria esperar.

Eu tinha resolvido.

mudança

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 você deveria fazer um PR

@CodyMoore240 Já foi resolvido em 1.0.0-alpha.1

Obrigado vou bifurcar.

Eu consertei adicionando <i></i> antes que a palavra precisasse ser quebrada, e parece

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

Esta edição começou há 5 anos... e contando:
Gostaria de compartilhar com o mundo que encontrei uma maneira de contornar esse bug irritante,
Eu peguei o texto de uma entrada textarea:

var txt = modal_dialog_text_area_input.value;
em seguida, substituí cada espaço em branco pela marcação a seguir, para preservar os espaços em branco. O que o html2canvas não consegue fazer e por que nos encontramos às 3:00 da manhã aqui, em vez de na cama:

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

Agora o parágrafo parece bom e a captura de tela que o html2canvas tira está OK.

Outra coisa: o elemento de parágrafo deve ter as seguintes regras de CSS:

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

Cuidem-se vocês