使用CSS显示带换行符的格式化HTML文本

Question

假设我有这样的文字：

$scope.text = 'This is the first line\nthis is the next line';

我希望在使用agular的div标签中显示

<div>{{text}}</div>

如何将此文本格式化为 WITH 换行符？ 现在它显示如下：

这是第一行，这是下一行

Answer 1

为清晰起见的内联样式

<div style="white-space: pre;">{{ text }}</div>

Answer 2

一个简单的解决方案是在div中使用pre样式

<div style="white-space: pre;">{{ text }}</p>

Answer 3

如果您需要在文本中进行格式化，则可以使用html语法。如果您无法控制文本，则必须替换char。 Angular无法理解\n。

$scope.text = 'This is the first line \n this is the next line';
$scope.text =  $scope.text.replace(/\n/g, '<br/>');

然后，在您的HTML中：

<div><span ng-bind-html="text"></span></div>