[英]Word Wrapping using ng-bind-html
我正在使用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, ' ') //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)之后。
将此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 />");
}
};
});
添加属性
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.