How to handle new line in handlebar.js

Question

I am using HandleBar.js in my rails jquery mobile application.

I have a json returned value data= "hi\n\n\n\n\nb\n\n\n\nhow r u"

which when used in .hbs file as {{data}} showing me as hi how r u and not as with the actual new line inserted

Please suggest me.

Pre tag helps me

Maybe this can help http://stackoverflow.com/questions/12331077/does-handlebars-js-replace-newline-characters-with-br — Uri, Sep 22 '12 at 15:53

score 4 · Answer 1 · answered Jan 05 '15 at 04:22

Handlebars doesn't mess with newlines in your data unless you have registered a helper which is doing something with them. A good way of dealing with newlines in HTML without converting them to br tags would be to use the CSS property white-space while rendering the handlebars template in HTML. You can set its value to pre-line.

Read the related documentation on MDN

score 1 · Answer 2 · answered Jun 25 '12 at 21:19

1

Look at the source of the generated file - your newline characters are probably there, HTML simply does not render newline characters as new lines.

You can insert a linebreak with <br />

However, it looks like you're trying to format the position of your lines using newline characters, which technically should be done by wrapping your lines in <p> or <div> tags and styling with CSS.

answered Jun 25 '12 at 21:19

Nathan Fig

14,970
9
43
57

No in the source also it doesnt have any new lines. But its saved with \n in table.. – useranon Jun 26 '12 at 06:08

score 1 · Answer 3 · answered Jul 12 '22 at 08:58

1

Simply use the CSS property white-space and set the value as pre-line

For a example:

<p style="white-space: pre-line">
  {{text}}
</p>

answered Jul 12 '22 at 08:58

Tharinda Prabhath

51
2

This was already suggested by [the accepted answer from seven years ago](https://stackoverflow.com/a/27773380/3025856). Please don't repeat answers. – Jeremy Caney Jul 16 '22 at 19:54

How to handle new line in handlebar.js

3 Answers3