保留angularjs中的换行符

Question

我见过这个问题.

我的代码而不是ng-bind="item.desc"用途,{{item.desc}}因为我有一个ng-repeat之前.

所以我的代码:

<div ng-repeat="item in items">
  {{item.description}}
</div>

项目描述包含\n未呈现的换行符.

{{item.description}}假设我有ng-repeat上述内容,如何轻松显示换行符？

Answer 1

基于@pilau的回答 - 但是即使接受的答案也没有改进.

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

这将使用给定的换行符和空格,但也会在内容边界处中断内容.有关白色空间属性的更多信息,请访问:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

如果你想打破换行符,但也要在文本前面折叠多个空格或空格(非常类似于原始浏览器行为),你可以使用@aaki建议:

white-space: pre-line;

不同的渲染模式的比较很好:http://meyerweb.com/eric/css/tests/white-space.html

Answer 2

尝试:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

该<pre>包装将打印文本与\n文本

如果你打印json,为了更好看使用json过滤器,如:

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Demo

我同意@Paul Weber这white-space: pre-wrap;是更好的方法,无论如何使用<pre>- 快速的方式主要是调试一些东西(如果你不想浪费时间在造型上)

Answer 3

使用CSS非常简单(我发誓).

.angular-with-newlines {
  white-space: pre;
}

• 看马!没有额外的HTML标签!

Answer 4

使用CSS,这可以轻松实现.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

或者可以为此目的创建CSS类,并且可以从外部CSS文件中使用