保留angularjs中的换行符

我已经看到了这个问题。

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

所以我的代码：

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

项目说明包含\n未呈现的换行符。

{{item.description}}假设我已具备ng-repeat上述条件，如何轻松显示换行符？

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

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

如果您想换行，也可以在文本之前折叠多个空格或空白（非常类似于原始浏览器的行为），可以使用@aaki建议：

white-space: pre-line;

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

尝试：

<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>-主要用于调试某些东西的快速方法（如果您不想在样式上浪费时间）

CSS非常简单（我发誓，它可以工作）。

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

• 快看 没有额外的HTML标签！

使用CSS可以轻松实现。

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

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

好吧，这取决于您是否要绑定数据，其中不应包含任何格式，否则您可以bind-html并且description.replace(/\\n/g, '<br>') 不确定它是否是您想要的。

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>标签中。之后，您可以根据需要设置样式。

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

white-space: pre-wrap

通过此文本<textarea>可以在其中显示带有空格和行制动器的文本

的HTML

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

的CSS

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

是的，我要么使用<pre>标签或使用ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe（使用NG-绑定，HTML，如果你使用的是1.2+）使用后.replace()，以更改/n为<br />

只需使用CSS样式“空白：预包装”，您就可以开始使用了。我遇到了同样的问题，需要处理换行符和空白确实很特别的错误消息。我只是在绑定数据的地方添加了该内联，它的工作方式就像Charm！

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

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

这样，您可以将类应用于段落并使用CSS很好地设置样式。