How do you add a line break inside of a javascript variable using KineticJS?

Question

I have a variable that looks like this:

var simpleText = new Kinetic.Text({
    text: 'where text goes',
    fontSize: 24
  });

How do I insert a line break where the text goes. I've tried:

text: 'where text goes \n where text goes',

text: 'where text goes \n\n where text goes',

text: 'where text goes \r\n where text goes',

text: 'where text goes <br /> where text goes',

text: 'where text goes \n' + 'where text goes \n',

text: 'where text goes ' + 'where text goes ',

text: 'where text goes ' 
+ 'where text goes ',

text: 'where text goes 
where text goes',

Error on my end. \n works

Motorboat

It's probably outputting HTML, so use <br /> instead of \n. Otherwise, your first example should work. – Purity

Thanks for the suggestion but that doesn't work, it's not outputting html. Also when I use \n it doesn't output any text at all. – Motorboat

Are you using this library?: github.com/ericdrowell/KineticJS – Purity

Yes I am using that @Purity – Motorboat

I have used \n in my work... so the error must be somewhere else. Try to set the breakpoints and dig in – Parham

Answer 1

If you are outputting to HTML, such as with innerHTML, just use <br />.

If, however, you are outputting to text in an HTML context (such as nodeValue or innerText, you will have to use \n and ensure that the container has the CSS white-space property set to something that doesn't condence whitespace, such as pre-wrap.

Outworn

\n doesn't work nor does <br />. Sorry I forgot to mention I'm using KineticJS. – Motorboat

Answer 2

I've never heard of Kinetic text but based on this sample: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ you should do:

text: 'where text goes\n\nwhere text goes',

Collect

It doesn't say to use \n\n. It has that for 2 line breaks. Notice the extra line in the output... – Purity

Thanks for the suggestion, unfortunately that doesn't work either. I will update my question. – Motorboat

Thanks @Purity I did not see that. – Collect

Answer 3

Using html() instead of 'text' and 'val'

.html('using some -br- simple text here');

Result: using some
simple text here

Premises