使用 ng-bind-html 自动换行

Question

我正在使用 AngularJS 构建个人笔记管理应用程序。在此期间，我运行遇到了一些问题，我可以选择我的错误：我是否应该拥有一个不能自动换行的应用程序或一个不能感知 return 键的应用程序。

起初，我的应用程序不会感知 return 键或额外的空格，因此，在我的注释指令中，我替换了： {{note.body}} 和： 

虽然它解决了回车键的问题，但它不会自动换行：

使用 ng-bind-html，自动换行失败 - 这对我的应用来说太糟糕了，因为我希望它在调整大小时非常灵活。

如何修复此错误？

这是我的格式过滤器：angular.module('NoteWrangler') .filter('format', function (){ return function(input) { if(!input) return input; var output = input //replace possible line breaks. .replace(/(\r\n|\r|\n)/g, ' ') //replace tabs .replace(/\t/g, '   ') //replace spaces. .replace(/ /g, ' '); return output; }; });

注意指令：

```<div class="container note note-full">
    <h2>{{note.title}}</h2>
    <p ng-bind-html="note.body | format"></p>
    <p class="text-muted date">Posted on {{note.timestamp | date}}</p>
</div>```

如果使用标签是解决这个问题的唯一方法，那么我会这样做 - 在我使用一些 CSS.

使背景、边框等不可见之后

Answer 1

将此 css class 添加到您的  或您要使用的任何标签：

.text-pre-wrap{
    white-space: pre-wrap !important;
}

另外你只需要这个作为你的过滤器

angular.module('NoteWrangler').filter('format', function () {
  return function (input) {
    if (input) {
      return input.replace(/\n/g, "<br />");
    }
  };
});

Answer 2

添加属性

.text-pre-wrap{
    white-space: pre-wrap !important;
}

对我来说不够。

我还需要补充：

.text-pre-wrap{
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
}

并且在 html 中：

<div ng-bind-html="notes.html" class="text-pre-wrap"></div>

使用 ng-bind-html 自动换行

Word Wrapping using ng-bind-html

html

javascript

angularjs

ng-bind-html