如何让 HTML 识别 string 里的 '\n' 并成功换行?

我先将 ci 返回的结果存到数据库 MongoDB 里,再由前端页面读取数据库里的结果并显示在页面上,但问题是,页面显示的结果并没有换行。
像这样:

如何让 HTML 识别 string 里的 '\n' 并成功换行?_第1张图片

而我的预期效果应该是这样显示结果:

npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~pretest: [email protected]
npm info lifecycle [email protected]~test: [email protected]

> [email protected] test /var
> jasmine

Started
F

Failures:
1) count-string-in-collection 计数数组字符串
Message:
Expected undefined to equal [ 'a-2', 'b-2', 'c-1', 'd-1' ].
Stack:
Error: Expected undefined to equal [ 'a-2', 'b-2', 'c-1', 'd-1' ].
at Object. (/var/spec/count-string-spec.js:9:20)

1 spec, 1 failure
Finished in 0.013 seconds

npm info lifecycle [email protected]~test: Failed to exec test script
npm ERR! Test failed. See above for more details.

尝试过的方法:

  1. 我本以为是后台存数据库的时候就把 '\n' 丢掉了,然后我就在后台这样
    JSON.stringfy(result),然后在前端这样JSON.parse,然而并没有是么卵用。
  2. 尝试让结果输出成 markdown 格式,但发现 markdown 也识别不了 '\n' 。

根本原因

根本原因是 html 识别不了 '\n',于是 google 了一下,发现只要一行代码就可以达到这种效果了:

如何让 HTML 识别 string 里的 '\n' 并成功换行?_第2张图片

只要在结果所在的 div 的 css 设置:

white-space: pre-line;

然后页面就能成功识别 '\n' 并整齐的显示结果了。

你可能感兴趣的:(如何让 HTML 识别 string 里的 '\n' 并成功换行?)