Question

我正在尝试显示以下文字。在控制器中：

var message = 'Original Message:'+'\n'+'\n'+'From:CustomerService'+'\n'+'createdDate:2016-01-13T10:17:31.279-05:00';

在HTML中：

<div style="word-wrap:break-word"">{{message}}
</div>

但我收到的信息是这样的：

OriginalMessage：国家：CustomerServicecreateDate：2016-01-13T10：17：31.279-05：00

div标签忽略了新的行和空格字符。

Answer 1

您的编码\n并不代表您使用 <br> 的HTML格式的新行。

$scope.message = 'Original Message: <br>' + 
   'From:CustomerService'+'<br>'+'createdDate:2016-01-13T10:17:31.279-05:00';

由于您使用的是角度，因此您可能需要检查ng-bind-html属性。

这是full demo

<强> JS

 $scope.message = 'Original Message: <br>' + 
       'From:CustomerService'+'<br>'+'createdDate:2016-01-13T10:17:31.279-05:00';

<强> HTML

<p ng-bind-html="message"></p>

Answer 2

如果您要在html中显示\n的文字，则可以使用 white-space: pre-wrap;

如果你不需要它作为html换行文本我们<br>。您还可以解析文本，并在呈现之前将\n替换为<br>，如果这是首选

var message = 'Original Message:'+'\n'+'\n'+'From:CustomerService'+'\n'+'createdDate:2016-01-13T10:17:31.279-05:00';
document.getElementById('content').innerHTML = message

#content {
    white-space: pre-wrap;
}

<div id="content"></div>

使用Div标签显示长文本，不带剥离空格

2 个答案: