Meteor: how to visualize line breaks?

Question

I have the following variable: "hello↵↵world". (value comes from text box)

The problem is that I ask the Meteor to display it with {{content}}, everything is displayed on one line, and line breaks are not taken into account.

{{content}} # renders hello world # should render hello world 

Answer 1

Wrap with

<pre> Any amount of formatting. </pre>

Answer 2

If you use bootstrap using the <pre> , you will get some style that you probably don't need ... If you want to avoid this, you can solve this with simple CSS:

 .pre { white-space: pre; } 

and then just wrap the contents with this class:

 <span class="pre">{{content}}</span> 

Answer 3

<pre> worked fine for me until I had a long text. By default, it disables line wrapping, and long lines break the page layout or crop.

Perhaps you will get around it with white-space: pre-wrap; , but what I ended up with was creating a Spacebars-Helper helper that first eludes the text and then replaces all the breaks with <br/>

 UI.registerHelper('breaklines', function(text, options) { text = s.escapeHTML(text); text = text.replace(/(\r\n|\n|\r)/gm, '<br/>'); return new Spacebars.SafeString(text); }); 

Then I used the helper in my templates as follows:

 {{breaklines title}} 

escapeHTML is part of Underscore.string, a set of string manipulation extensions that you can use with meteor add underscorestring:underscore.string , but any other way to escape html should work just as well.

Answer 4

One way is to create a helper helm:

 Handlebars.registerHelper 'breaklines', (text) -> text = text.replace /(\r\n|\n|\r)/gm, '<br>' return text 

and then do it: (don't forget the three brackets!)

 {{{breaklines content}}} 

Answer 5

just use <br> no more trouble.