Word使用ng-bind-html进行包装

Question

我正在使用AngularJS构建个人笔记管理应用程序。在这期间，我遇到了一些问题，我可以选择我的错误：我是否应该有一个不能自动换行的应用程序或者一个无法检测返回键的应用程序。

首先，我的应用程序无法检测返回键或多余空格，因此，在我的note指令中，我替换了：     <p>{{note.body}}</p> 有：     <p ng-bind-html="note.body | format"></p>

虽然它用enter键修复了问题，但它不会自动换行：

使用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, '<br/>') //replace tabs .replace(/\t/g, '&nbsp;&nbsp;&nbsp;') //replace spaces. .replace(/ /g, '&nbsp;'); 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类添加到您的<p>或您要使用的任何标记：

.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>