在angularjs中保留换行符 [英] Preserve line breaks in angularjs

问题描述

我已经看到了这个 SO问题.

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

所以我的代码:

{{商品描述}}

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

假设我有上面的 ng-repeat，{{item.description}} 如何轻松显示换行符?

解决方案

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

{{商品描述}}
/* 在 css 文件或样式块中 */.angular-with-newlines {空白:前行；}

这将使用给定的换行符和空格，但也会在内容边界处破坏内容.可以在此处找到有关空白属性的更多信息:

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

如果您想在换行符处换行，但又不想折叠文本前的多个空格或空格(以呈现代码或其他内容)，您可以使用:

white-space:预包装；

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

I have seen this SO question.

My code instead of ng-bind="item.desc" uses {{item.desc}} because I have a ng-repeat before.

So my code:

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

The item description contains \n for newlines which are not rendered.

How can the {{item.description}} display the newlines easily assuming that I have the ng-repeat above?

解决方案

Based on @pilau s answer - but with an improvement that even the accepted answer does not have.

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

This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:

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

If you want to break on newlines, but also not collapse multiple spaces or white space preceeding the text (to render code or something), you can use:

white-space: pre-wrap;

Nice comparison of the different rendering modes: http://meyerweb.com/eric/css/tests/white-space.html

这篇关于在angularjs中保留换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！