字符串中出现换行符时,我们在渲染页面中,无法解析到换行符,就像这样:
const dayTableArr = [
{
title: '新秀榜奖励',
context: [{ one: '第一名', two: '2000彩币+封面角标\n+神秘实物奖励' },
{ one: '第二名', two: '1500彩币+神秘实物奖励' },
{ one: '第三名', two: '500彩币+神秘实物奖励' }]
},
{
title: '王者之声奖励',
context: [{ one: '第一名', two: '8%钻石奖励+证书' },
{ one: '第二名', two: '5%钻石奖励+证书' },
{ one: '第三名', two: '2%钻石奖励+证书' },
{ one: '前十名', two: '冬季勋章' }]
},
{
title: '最佳助力榜奖励',
context: [{ one: '第一名', two: '火凤凰进场特效*30天' },
{ one: '第二名', two: '火凤凰进场特效*25天' },
{ one: '第三名', two: '火凤凰进场特效*20天' },
{ one: '第四名', two: '火凤凰进场特效*15天' },
{ one: '第五名', two: '火凤凰进场特效*10天' },
{ one: '第六名', two: '火凤凰进场特效*5天' }]
}
]
这时候就需要在其所在div的css样式中添加white-space: pre;
效果如下: