Meteor: How to render line breaks?

Question

I have the following variable: "hello↵↵world". (the value is coming from a textarea)

The problem is when I ask Meteor to display it with {{content}}, everything appears on the same line and the line break are not taken into account.

{{content}}

# renders
hello world

# should render
hello
world

Answer 1

If you're using bootstrap using the <pre> tag will come with some style that you probably don't want... If you want to avoid that you can solve this with some simple CSS:

.pre {
  white-space: pre;
}

and then just wrap your content with that class:

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

Answer 2

<pre> worked fine for me until I had long lines of text. By default it disables line wrapping and long lines break the page layout or are cut off.

You could probably get around it with white-space: pre-wrap; but what I ended up doing was create a Spacebars-Helper that escapes the text first and then replaces all 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);
});

I would then use the helper in my templates in the following way:

{{breaklines title}}

escapeHTML is part of Underscore.string, a collection of string manipulation extensions that you can pull in with meteor add underscorestring:underscore.string, but any other way of escaping html should work fine as well.