小编典典

保留angularjs中的换行符

angularjs

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

所以我的代码:

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

项目说明包含\n未呈现的换行符。

{{item.description}}假设我已具备ng-repeat上述条件,如何轻松显示换行符?


阅读 317

收藏
2020-07-04

共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/zh-CN/docs/Web/CSS/white-space

如果您想换行,并且在文本之前折叠多个空格或空白(非常类似于原始浏览器的行为),则可以使用@aaki建议:

white-space: pre-line;

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

2020-07-04