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

It's probably outputting HTML, so use `
` instead of `\n`. Otherwise, your first example should work. — Ian, May 16 '13 at 19:09
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. — user761479, May 16 '13 at 19:12
Are you using this library?: https://github.com/ericdrowell/KineticJS — Ian, May 16 '13 at 19:14
I have used `\n` in my work... so the error must be somewhere else. Try to set the breakpoints and dig in — Ani, May 16 '13 at 21:12

score 9 · Answer 1 · answered May 16 '13 at 19:13

9

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.

answered May 16 '13 at 19:13

Niet the Dark Absol

320,036
81
464
592

1

\n doesn't work nor does
. Sorry I forgot to mention I'm using KineticJS. – user761479 May 16 '13 at 19:23

score 0 · Answer 2 · answered May 16 '13 at 19:14

0

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',

answered May 16 '13 at 19:14

MBillau

5,366
2
28
29

2

It doesn't say to use `\n\n`. It has that for **2** line breaks. Notice the extra line in the output... – Ian May 16 '13 at 19:17
Thanks for the suggestion, unfortunately that doesn't work either. I will update my question. – user761479 May 16 '13 at 19:18
Thanks @Ian I did not see that. – MBillau May 20 '13 at 15:44

Keith Male · Answer 3 · 2020-03-10T20:42:58.150

0

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

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

Result: using some
simple text here

edited Mar 10 '20 at 20:42

answered Mar 10 '20 at 20:11

Keith Male

1
1
1

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

3 Answers3

Linked