CODEWITHSUNDEEP
meteor
Julien Le Coupanec
Julien Le Coupanec

Reputation: 7988

Meteor: How to render line breaks?

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

Upvotes: 8

Views: 3626

Answers (5)

SaiKumar Immadi
SaiKumar Immadi

Reputation: 117

just use <br> it is enough no more troubles.

Upvotes: 0

laberning
laberning

Reputation: 809

<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.

Upvotes: 8

jcmrgo
jcmrgo

Reputation: 851

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>

Upvotes: 11

Jim Mack
Jim Mack

Reputation: 1437

Wrap with

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

Upvotes: 6

Julien Le Coupanec
Julien Le Coupanec

Reputation: 7988

One way is to create a handlebar helper:

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

and then to do so: (do not forget the three brackets!)

{{{breaklines content}}}

Upvotes: 4

Related Questions