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>