在 angularjs 中保留断线

我看过 这个所以的问题。

我的代码而不是 ng-bind="item.desc"使用 {{item.desc}}，因为我以前有一个 ng-repeat。

所以我的原则是:

<div ng-repeat="item in items">
{{item.description}}
</div>

项描述包含未呈现的换行的 \n。

假设我有上面的 ng-repeat，那么 {{item.description}}如何轻松地显示换行呢？

166241 次浏览
小开

试试:

<div ng-repeat="item in items">
<pre>\{\{item.description}}</pre>
</div>

<pre>包装器将把 \n作为文本打印出来

另外如果你打印的是 json，为了更好看使用 json滤镜，比如:

<div ng-repeat="item in items">
<pre>\{\{item.description|json}}</pre>
</div>

演示

我同意 @Paul Weber的观点，white-space: pre-wrap;是更好的方法，无论如何使用 <pre>-快速的方法主要是为了调试一些东西(如果你不想在样式上浪费时间)

小开

这取决于，如果你想绑定数据，它不应该有任何格式化，否则你可以 bind-html和做 description.replace(/\\n/g, '<br>') 但不确定这是不是你想要的。

小开

是的，在使用 .replace()将 /n更改为 <br />之后，我要么使用 <pre>标记，要么使用 ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe(如果使用1.2 + ，则使用 ng-bind-html)

小开

这是如此简单的 CSS (它的工作，我发誓)。

.angular-with-newlines {
white-space: pre;
}
  • 看妈妈! 没有额外的 HTML 标签！
小开
最佳答案

基于@pilau 的答案——但是有一个改进，即使是公认的答案也没有。

<div class="angular-with-newlines" ng-repeat="item in items">
\{\{item.description}}
</div>


/* in the css file or in a style block */
.angular-with-newlines {
white-space: pre-line;
}

这将使用给定的换行和空格，但也会在内容边界中断内容。关于空白属性的更多信息可以在这里找到:

Https://developer.mozilla.org/en-us/docs/web/css/white-space

如果希望在换行符上中断，但又不想折叠文本前面的多个空格或空格(用于呈现代码或其他内容) ，可以使用:

white-space: pre-wrap;

不同渲染模式的良好比较: http://meyerweb.com/eric/css/tests/white-space.html

小开

Css 解决方案可以工作，但是您不能真正控制样式。在我的情况下，在换行之后我需要更多的空间。下面是我为处理这个问题而创建的一个指令(类型脚本) :

function preDirective(): angular.IDirective {
return {
restrict: 'C',
priority: 450,
link: (scope, el, attr, ctrl) => {
scope.$watch(
() => el[0].innerHTML,
(newVal) => {
let lineBreakIndex = newVal.indexOf('\n');
if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
el[0].innerHTML = newHtml;
}
}
)
}
};


function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}


function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
}


angular.module('app').directive('pre', preDirective);

用途:

<div class="pre">\{\{item.description}}</div>

它所做的只是将文本的每个部分封装到一个 <p>标记中。 然后你就可以随心所欲地设计它了。

小开

通过 CSS，这可以很容易地实现。

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> \{\{item.description}}</span>
</div>

或者可以为此目的创建一个 CSS 类，并且可以从外部 CSS 文件中使用

小开

只要使用 css 样式“ white-space: pre-wraps”就可以了。我也遇到过同样的问题，需要处理错误消息，其中换行符和空格非常特殊。我刚刚在绑定数据的地方添加了这个内联，它像 Charm 一样工作！

小开

我也遇到过类似的问题。我对这里的其他答案不是很感兴趣，因为它们实际上不允许你很容易地设计换行行为。我不确定您是否可以控制原始数据，但我采用的解决方案是将“条目”从字符串数组切换为数组数组，其中第二个数组中的每个条目都包含一行文本。这样你就可以做这样的事情:

<div ng-repeat="item in items">
<p ng-repeat="para in item.description">
\{\{para}}
</p>
</div>

通过这种方式，您可以将类应用到段落中，并使用 CSS 很好地设计它们的样式。

小开

把这个加到你的风格里，这个对我很有用

white-space: pre-wrap

通过这段文字在 <textarea>可以显示，因为它在那里与空格和线刹车

超文本标示语言

   <p class="text-style">\{\{product?.description}}</p>

CSS

.text-style{
white-space: pre-wrap
}

提交答案