如何在JSON文件中添加换行符，实现前端JS渲染时内容正常换行

失效原因 #

• jQuery的.text()方法只会把传入的内容当成纯文本处理，插入的<br/>会被直接转义成普通字符串显示，不会被解析为HTML换行标签
• 普通的<p>标签默认不会识别\n作为换行符，只有设置了对应的CSS属性才会生效

方案1：用.html()方法插入
标签（最便捷） #

直接把原来的.text()改成.html()，两个字段之间拼接<br>换行标签即可：

$('.carlo_txt p').html(senior.p1_desc + '<br>' + senior.p2_desc)

注意：如果你的JSON字段内容是用户可提交的不可信内容，这个方法有XSS注入风险，自用的内部JSON数据可以放心使用

方案2：保留\n换行，补充CSS适配 #

如果你想继续用\n拼接内容，可以给对应的p标签加CSS属性：
首先JS代码写成：

$('.carlo_txt p').text(senior.p1_desc + '\n' + senior.p2_desc)

然后在你的CSS文件或者页面的<style>标签里添加如下规则：

.carlo_txt p {
  white-space: pre-line;
}

这个属性会让浏览器自动识别文本里的\n作为换行符渲染。

内容的提问来源于stack exchange，提问作者Hyvs775