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

回答1:

Wrap with

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

回答2:

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>

回答3:

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/22285310/meteor-how-to-render-line-breaks

标签

meteor