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