HTML5 Canvas | Word break without hyphen for words exceeding maxwidth when text wrapping

Question

I will be using a monospace font for text wrapping on canvas and I need to split the words (no need for hyphenation) that exceed maxwidth. I also need to limit the number of displayed lines of text on canvas to 5 lines (starting from first line).

This fiddle is what I would use: http://jsfiddle.net/eECar/16/

In that fiddle, when you apply the following text...

todo(ctx, "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi doloremque dolores repudiandae expedita consectetur labore veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates vitae.", 12, "black");

... the B string gets split according to maxwidth but creates a new line when exceeding that maxwidth, like so (after "Fugiat," a new line occurs):

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda
illum tempore nam iure necessitatibus unde! Fugiat,
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni,
accusamus, modi doloremque dolores repudiandae expedita consectetur labore
veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque
perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse
eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum
voluptatem voluptates vitae.

I want the B string to look like this:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda
illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi
doloremque dolores repudiandae expedita consectetur labore veniam minima
minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad
molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum.
Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates
vitae.

REMINDER: Only the first five lines of text will be displayed on canvas. I'll be using monospace font, all letters and spaces being same width, will that be simpler to handle? Thx for input.

UPDATE: I managed to make the long strings display where they should but that technique also splits words that are not longer than maxwidth, see http://jsfiddle.net/eECar/47/ In the Fiddle I changed font to monospace and basically changed this code...

for( j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+1 );

.. to this:

for( j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+35 );

... +35 being character length per line I gather.

I thought I had it solved (the Latin skrewed me up LOL) but on careful scrutiny I realized that words smaller than max character count per line also get split at end of line. Any way to preserve those words intact without splitting?

Answer 1

Try splitting the entire text into individual words so you can test for your "special" AAA & BBB words.

Then you can treat those special cases any way you desire.

You can split the text into an array containing all the individual words like this:

var words = text.split(' ');

Then you can catch your "AAA" & "BBB" special words and handle them specially like this:

if(words[i]=="AAA" || words[i]=="BBB"){ 
    // handle these special words
}else{
    // handle these non-special words
}