在angularjs中保留换行符答案

【问题标题】：Preserve line breaks in angularjs在angularjs中保留换行符
【发布时间】：2013-11-10 04:06:59
【问题描述】：

我看到this SO 问题。

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

所以我的代码：

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

项目描述包含\n 用于未呈现的换行符。

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

【问题讨论】：

放在
```
标签里？
```
通过使用 style="white-space:pre-wrap;" 设置包装器 div 的样式。
@Stewie 的评论非常适合我（AngularJS 1.2.18），它明确展示了如何设置单个元素的样式（与 pilau 和 Paul Weber 的解决方案相反）并且无需更改样式
```
 标签的其他建议。
```
你是对的，我假设每个人都知道如何使用基本的 css 并将类应用于元素。如果 Stewie 发表了他的评论作为答案，那对他来说会更好。虽然看起来他的积分已经够多了……
我同意，@Stewie 绝对应该将他的评论格式化为答案。它完美地解决了我的问题。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

基于@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;
}

这将使用给定的换行符和空格，但也会在内容边界处中断内容。有关 white-space 属性的更多信息，请参见此处：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

如果您想换行，但又不想折叠文本前面的多个空格或空白（以呈现代码或其他内容），您可以使用：

white-space: pre-wrap;

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

【讨论】：

这里是 IMO 的最佳解决方案，因为它不会像 pre 那样重新设置为等宽字体。
观察文本前面的空白，它将被保留。
既然你提出来了，pre-line 不是首选吗？它更接近 HTML 通常呈现其节点的文本内容并仍然保留换行符的方式。
嗯...你是对的，pre-line 是更好的解决方案，在我不确定为什么我选择 pre-wrap 而不是 pre-line 之后。也许浏览器对预行的支持不是很好？但我会将这个添加到答案中......这是效果图的比较：meyerweb.com/eric/css/tests/white-space.html
这应该是公认的答案！ pre-line 是要走的路。谢谢保罗！

【解决方案2】：

只需将其添加到您的样式中，这对我有用

white-space: pre-wrap

通过<textarea>中的此文本可以显示，因为它在那里带有空格和线刹车

HTML

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

CSS

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

【讨论】：

【解决方案3】：

我遇到了类似的问题。我对这里的其他答案并不那么热衷，因为它们实际上并不允许您非常轻松地设置换行行为的样式。我不确定您是否可以控制原始数据，但我采用的解决方案是将“项目”从字符串数组切换为数组数组，其中第二个数组中的每个项目都包含一行文本.这样您就可以执行以下操作：

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

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

【讨论】：

【解决方案4】：

使用 CSS 非常简单（我发誓它确实有效）。

.angular-with-newlines {
  white-space: pre;
}

看，妈！没有额外的 HTML 标签！

【讨论】：

@pilau 如果文本包含逗号（，）而不是空格，我想换行我该怎么做？
@shylendra 我的解决方案不会换行文本，它的行为就像在 pre 标记中一样。也许打开另一个问题？或者我错过了你的意思？
我想知道浏览器的兼容性。根据这张图表，它似乎适用于所有主流浏览器。这比用 br 标签替换换行符要少得多。谢谢！只需注意格式化代码，使其不包含空格，它们当然会显示出来。 developer.mozilla.org/en-US/docs/Web/CSS/white-space
使用 white-space: pre-wrap 可能会更好，否则内容将永远不会换行。

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用 CSS 可以轻松实现。

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

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

【讨论】：

【解决方案7】：

试试：

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

Demo

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

【讨论】：

item.description 是在我不知道的区域有\n 的文本，而不是在末尾。根据您的编辑，我想我需要pre。

很多时候，

 标签并不是一个好的解决方案，因为它会将文本转换为 courier 并破坏页面的样式。 style="white-space:pre-wrap;"解决方案似乎是一个更好的解决方案（至少对于我的情况）

@CF_HoneyBadger 好吧，对你来说@pilau 的答案是正确的，但这并不意味着我错了，因此我被否决了
我尝试将所有 \n 转换为 <br/>，然后这些标签当然不会被呈现为 HTML 标记...在所有这些转换找到您的 style 之后解决方案，这是一个令人难以置信的帮助和简化...现在我不必继续转换所有后端数据，只需在视图中进行一些更改...您应该得到 +1000！
这适用于代码，但不适用于向用户显示消息。我认为保罗的答案是正确的

【解决方案8】：

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> 标记中。之后，您可以随意设置样式。

【讨论】：

【解决方案9】：

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

【讨论】：

ng-bind-html-unsafe 已弃用

【解决方案10】：

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

【讨论】：