流星:如何渲染换行符？

Question

我有以下变量:"hello↵↵world".(价值来自textarea)

问题是当我要求Meteor用{{content}}显示它时,所有内容都出现在同一行,并且不考虑换行符.

{{content}}

# renders
hello world

# should render
hello
world

Answer 1

如果你使用bootstrap使用<pre>标签将带有一些你可能不想要的样式...如果你想避免它,你可以用一些简单的CSS来解决这个问题:

.pre {
  white-space: pre;
}

然后用这个类包装你的内容:

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

Answer 2

<pre>我工作得很好,直到我有很长的文字.默认情况下,它禁用换行和长行打破页面布局或被切断.

你可以解决它,white-space: pre-wrap;但我最终做的是创建一个Spacebars-Helper,它首先逃避文本,然后替换所有的中断<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);
});

然后,我将以下列方式在模板中使用帮助程序:

{{breaklines title}}

escapeHTML是Underscore.string的一部分,这是一个你可以使用的字符串操作扩展的集合meteor add underscorestring:underscore.string,但任何其他转义html的方式也应该可以正常工作.

Answer 3

包裹着

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