word-wrap:break-word is not working

[hanc1208]

word-wrap:break-word is not working when the text is too long without any white spaces.

like <div style="width:30px;height:100px;word-wrap:break-word;">aaaaaaaaaaaaaaa</div>

[programmin1]

Are you really using word-wrap:break-work? That is really bad when it turns parrot into par rot or worship into wors hip for example. I have yet to find a usable use for it but it is tempting when there is no such thing as max-font or force down to size in css.

[hanc1208]

I know but this function is very necessary for my service.

The view of the user is
aaa
aaa
aaa
But the captured picture is
aaaaaaaaaaaaaaaaaaa

It is very ambigous for users.

[snarkitect]

We're having this problem. We're using an html/text editor which uses break-word when a word is longer than the available width and has to be broken automatically. The rendering we see after using html2canvas with letterRendering enabled does not match. Often times, the line of text is rendered one line further down than it should without any wrapping at all.

[sureshotday]

we are also facing the same issue.

[hanc1208]

@savokiss can you create pull request that does auto-replacing if the option is specified?

[savokiss]

I might replied the wrong issue, here is my solution #83
@hanc1208 My solution is for the issue above and it don't need to edit the source code of this repo.

[flftfqwxf]

I have same question

[mariusbike1983]

Any news about this issue? I used, for testing, the latest version of html2canvas.js file and I still have the same problem :(

[mariusbike1983]

I wanted to really test this issue and indeed it seems to be reproduced even with the test-console on the official page. I created a very simple webpage, located at http://mariusbike83.wix.com/test1. This page contains only some fields and a text-area with a very long string (without spaces to break it up). When this is rendered with html2canvas library, you'll notice that the string is one-lined.

Has anyone found a solution to this problem?

(Btw, the official test console is located at https://html2canvas.hertzen.com/screenshots.html and be sure to uncheck the "Disable javascript" checkbox)

[codefactor]

For my application, I downgraded from 0.5.0-alpha1 to v0.4.1 and it seemed to work, so I am just going to use that version. I haven't thoroughly tested, but for sure long strings of characters wrapped properly. Try this to see if it resolves the issue; although other bugs might be introduced in the process due to big differences in the versions.

[okitty]

how about manually break each character with span tag by jquery?

[wayrex]

letterRendering set to true worked for me....
html2canvas options docs: https://html2canvas.hertzen.com/documentation.html

[SatoshiKawabata]

Is there no way to resolve this problem without using v0.4.1...?

[eKoopmans]

Hi @SatoshiKawabata, did you try using the option letterRendering: true suggested by @wayrex?

[SatoshiKawabata]

@eKoopmans I tried that but it didn't work too.

[gelinger777]

@eKoopmans @SatoshiKawabata I can confirm that on beta te letterRendering does not work too. Seems on older 0.4.1 version it works but on beta no.

[SatoshiKawabata]

@gelinger777 I want to use this by npm so I added an issue #1143. I should wait.

[love-everyday]

I had solved it.

change

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

to

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

[CodyMoore240]

@love-everyday you should make a PR

[love-everyday]

@CodyMoore240 It was already resolved in 1.0.0-alpha.1

[CodyMoore240]

Thank you i will fork.

[wangyupo]

I fixed it by add <i></i> before the word need break, and it looks like

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

[omeriko]

This issue started 5 years ago... and counting:
I'd like to share with the world that i've found a way to bypass this annoying bug,
I took the text from a textarea input :

var txt = modal_dialog_text_area_input.value;
then i replaced each whitespace with the following markup, in order to preserve whitespaces. Which html2canvas fails to do, and why we find ourselves at 3:00 AM in the morning here, instead of in bed:

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

Now the paragraph looks good and the screenshot html2canvas takes is OK.

Another thing: the paragraph element must have the following css rules:

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

Take care y'all

[xiaowuyaozqt]

I had solved it.

change

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

to

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

'this.options.letterRendering' and 'noLetterSpacing(container)' work together,you can add CSS letter-spacing to solve it. if you use CSS word-break,you can also change

function noLetterSpacing(container) {
                return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")));
}

to

function noLetterSpacing(container) {
                return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")))&&!(/^(break-word|break-all)$/.test(container.parent.css("wordBreak")));
}