保留AngularJS中的换行符

11 浏览
0 Comments

保留AngularJS中的换行符

我看过这个这个 Stack Overflow的问题。\n我的代码不是使用ng-bind=\"item.desc\"，而是使用{{item.desc}}，因为我在之前使用了ng-repeat。\n所以我的代码是：\n

  {{item.description}}

\n项目描述中包含有\\n的换行符，但它们并没有被渲染。\n在有ng-repeat的情况下，如何让{{item.description}}显示换行符？

0

3 答案

0 Comments

在AngularJS中保留换行符的问题是一个常见的需求。有时候我们希望在显示文本时保留原始的换行符，而不是将其替换成
标签。下面是一种解决方法：

可以通过CSS的white-space属性来实现。可以将以下CSS样式应用于包含文本的元素：

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

这样，文本将按照原始的换行符进行显示，而不会被浏览器自动合并成一行。这种方法非常简单，不需要额外的HTML标签。

另外，如果希望只在文本中包含逗号(,)时才进行换行，可以使用一些额外的逻辑处理。然而，这种方法并不会真正地进行换行，而是使文本表现得好像它在

标签中一样。所以，如果你的问题是关于换行的需求，那么可能需要另外提出一个问题或者回答有所偏离。


关于浏览器的兼容性，根据MDN文档的说明，这种方法在主流浏览器中都能正常工作。这比使用
标签替换换行符要方便得多。不过需要注意的是，格式化代码时不能包含空格，否则空格也会显示出来。你可以参考这个链接了解更多关于white-space属性的信息：


[developer.mozilla.org/en-US/docs/Web/CSS/white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)


如果希望文本在超出容器宽度时自动换行，可以考虑使用white-space: pre-wrap属性。这样，文本将根据需要自动进行换行。


以上是关于在AngularJS中保留换行符的问题的原因和解决方法。通过使用CSS的white-space属性，我们可以简单地实现这个需求，而不需要进行复杂的处理。希望这篇文章对你有所帮助！
0
0 Comments

在AngularJS中，当我们想要保留文本中的换行符时，有时会遇到问题。下面给出了一些解决方法。

首先，可以尝试使用<pre>标签包裹文本，这样可以将文本中的\n作为普通文本显示出来。例如：

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

另外，如果要打印JSON格式的文本，可以使用json过滤器来使其更易读。例如：

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

如果不想使用<pre>标签，可以尝试使用style="white-space: pre-wrap;"来实现相同的效果。这样可以避免<pre>标签将文本转换为Courier字体并破坏页面的样式。例如：

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

当然，每种方法都有其适用的场景。如果只是为了调试目的，<pre>标签可能是一个快速的解决方案。而style="white-space: pre-wrap;"则更适合在不破坏页面样式的情况下显示文本。

总之，以上是在AngularJS中保留换行符的一些解决方法。希望对你有所帮助。

参考链接：[Demo](http://jsfiddle.net/apt588r0/)

0
0 Comments

在AngularJS中保留换行的问题可能会导致文本内容无法正确地显示换行符。为了解决这个问题，可以使用CSS的white-space属性来控制文本的换行方式。

具体的解决方法是在HTML代码中为需要保留换行的文本添加一个class，然后在CSS文件或者style块中设置该class的white-space属性为pre-line或者pre-wrap。例如：


   {{item.description}}




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

通过设置white-space为pre-line，文本内容将按照HTML通常的方式进行换行，并且保留原有的换行符。如果想要在换行的同时不合并多个空格或者文本前面的空白字符（用于渲染代码等情况），可以将white-space设置为pre-wrap。

相关的更多信息可以在这里找到：[https://developer.mozilla.org/en-US/docs/Web/CSS/white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)

此外，还可以通过以下链接查看不同渲染模式的比较：[http://meyerweb.com/eric/css/tests/white-space.html](http://meyerweb.com/eric/css/tests/white-space.html)

将white-space属性设置为pre-line或者pre-wrap可以解决AngularJS中保留换行的问题，而且在渲染效果上更加符合预期。

0