css 识别变量中的换行符_如何让 HTML 识别 string 里的 '\n' 并成功换行?

本文讲述了在HTML中显示从数据库获取的内容时遇到的换行问题。尽管原始数据包含' ',但在页面上并未正确换行。通过在CSS中设置`white-space: pre-line;`属性,成功使HTML识别并实现了换行效果。
摘要由CSDN通过智能技术生成

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

像这样:

a580568e0055

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

npm info it worked if it ends with ok

npm info using npm@3.10.10

npm info using node@v6.9.5

npm info lifecycle js-quiz@1.0.0~pretest: js-quiz@1.0.0

npm info lifecycle js-quiz@1.0.0~test: js-quiz@1.0.0

> js-quiz@1.0.0 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 js-quiz@1.0.0~test: Failed to exec test script

npm ERR! Test failed. See above for more details.

尝试过的方法:

我本以为是后台存数据库的时候就把 '\n' 丢掉了,然后我就在后台这样

JSON.stringfy(result),然后在前端这样JSON.parse,然而并没有是么卵用。

尝试让结果输出成 markdown 格式,但发现 markdown 也识别不了 '\n' 。

根本原因

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

a580568e0055

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

white-space: pre-line;

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值