angular - 在 HTML 上创建一个新行

Question

我有一个简单的问题（我希望如此）。我有一个返回字符串作为结果的服务。格式是这样的：

" Test1: 关联已被接受。\nTest2: 关联已被接受。\n" "

在客户端（我使用的是 Angular 1.5.x），我将该字符串放入一个对象中（比如变量 $scope.alert.message）。之后我想在模态中打印该字符串。我的 html 是：

<script type="text/ng-template" id="infoTemplate.html">
    <div class="modal-header left" ng-class="['div-' + alert.type, closeable ? 'alert-dismissible' : null]">
        <h3 class="modal-title" id="modal-title">Info</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <img class="imm-info" ng-class="['imm-' + alert.type, closeable ? 'alert-dismissible' : null]" />
        <p class="col-sm-10 col-sm-offset-2">{{alert.message}}</p><button class="col-sm-3 col-sm-offset-5 btn " ng-class="['button-' + alert.type, closeable ? 'alert-dismissible' : null]" ng-click="cancel()">OK</button>
    </div>
</script>

您可以看到“{{alert.message}}”。我的问题是我的消息“不显示”字符 '\n'。所以它不会创建多于一行。这里的一个例子：

例子

Answer 1

我使用white-space: pre-wrapCSS 样式，例如：

<p style="white-space: pre-wrap">{{alert.message}}</p>

Answer 2

在 HTML 中试试这个：

<pre>{{ alert.message }}</pre>

已经在这里回答：

< pre > 包装器将使用 \n 作为文本打印文本