当我们在AngularJS应用程序中处理多行文本时，我们可能需要将多个字符串合并成一个，并以某种方式显示，而不会丢失原始字符串中的换行符。在本文中，我们将介绍如何使用AngularJS操作多行字符串，并在不断开字符串中的换行符的情况下显示它们。
多行字符串的表示
在JavaScript中，我们通常可以将多行字符串表示为带有 \n 的单个字符串或者使用 ES6 中的模板字符串（使用反引号 ``）来包含多行文本。例如：
// 使用 \n 来表示多行字符串 var multiLineString = "This is a\nmulti-line\nstring."; // 使用模板字符串表示多行字符串 var templateString = `This is a multi-line string.`;
无论哪种表示方法，都允许我们在字符串中包含换行符。
在AngularJS中处理多行字符串
在AngularJS中，我们可以使用 ng-bind-html 指令来展示 HTML 代码，其中我们可以通过 <br> 元素来手动插入换行符。例如：
<div ng-bind-html="myText"></div>
$scope.myText = "This is a <br>multi-line<br>string.";
但是，这种方法需要手动添加 <br> 元素，并且对于每个换行符，我们都必须手动添加一个 <br> 元素。这样做很麻烦，并且需要我们知道多行字符串中有多少个换行符。
幸运的是，AngularJS提供了一个过滤器 nl2br，它会自动将换行符转换为 <br> 元素。例如：
<div ng-bind-html="myText | nl2br"></div>
$scope.myText = "This is a\nmulti-line\nstring.";
在这个例子中，nl2br 过滤器会将 \n 转换为 <br> 元素，从而展示出原始字符串中的多行文本。
避免断开字符串
然而，如果我们在HTML中显示多行文本时使用 ng-bind-html ，则可能会遇到字符串被截断的问题。这是因为浏览器默认情况下，不会将超过一定长度的文本显示在同一行上。
为了避免这种情况发生，我们可以使用CSS属性 white-space: pre-wrap; 来告诉浏览器应该如何处理文本。例如：
<style>
pre {
white-space: pre-wrap;
}
</style>
<pre ng-bind-html="myText | nl2br"></pre>在这个例子中，我们使用 pre 元素来包含文本，并使用CSS样式 white-space: pre-wrap; 来告诉浏览器如何处理文本。这样，我们就可以在不断开字符串中的换行符的情况下显示多行文本了。
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ---------- ---------------
-------
--- -
------------ ---------
-
--------
-------
----- -----------------------
---- --------------------------- - -------------
-------
------- ------------------------------------------------------------------------------
--------
----------------------- ---
---------------- -------- -------------- -
------ -------------- -
------ ------------------------------------ ---------
--
---
--------------------- ---------- -------- -------- -
-------------------- - ----- -- ------------------------
----
---------
-------以上是如
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30385