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

mnemlml8 于 2022-12-22 发布在 Angular

关注(0)|答案(3)|浏览(214)

假设我有这样一段文字：

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

我想用一个div标签用agularJs来演示

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

如何显示带WITH换行符的文本？现在显示如下：
这是第一行这是下一行

3条答案

内联样式，清晰明了

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

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

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

如果你的文本需要一些格式，你可以使用html语法。如果你不能控制你的文本，你将不得不替换字符。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>