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”。所以它不会创建超过一行。这里的一个例子：

例子

原文由 Massimo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 HTML 中试试这个：

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

已经 在这里 回答：

< pre > 包装器将打印带有 \n 的文本作为文本

原文由 Alex Florin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Julien Kronegg 发布，翻译遵循 CC BY-SA 4.0 许可协议