使用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>