给文本加了white-space: pre-wrap却没有实现换行

今天做项目，遇到了个后端返回的数据是这样的，如下

{“errCode”:0,“errMsg”:“成功”,“data”:{“list”:[],“demand”:{“id”:903,“type”:“找人才”,“createDate”:“2020-11-27 09:57:26.0”,“keywords”:null,“orgName”:“广州健齿生物科技有限公司”,“isVail”:“0”,“contactName”:"-",“contactMobile”:“zhaopin@fsangels.com”,“content”:“职位名称：\r高级工程师\r\r职位公司：\r广州健齿生物科技有限公司\r\r职位介绍：\r广州健齿的机加工通用型种植体产品已获得欧盟CE许可证，通过ISO13485、ISO9001体系认证，3D打印个性 化种植体已申报中国首个口腔创新型医疗器械。在临床应用和销售渠道上做好布局，战略合作伙伴包括中山大学附属 口腔医院、广州医科大学附属口腔医院、香港菲力口腔医院、深圳市第二人民医院、华西口腔医院等。为加强研发实 力，公司与香港中文大学、香港大学、南方医科大学、广州医科大学、中山大学等达成 深度技术合作关系。\n广州健齿立足国内市场，向东南亚、香港、中东等地区辐射推广，积极加强 与东盟的经济交流。目前已与多个东盟国家签订超过2000万元的产品和技术服务意向合同。结合当前公司实际情\n 况，预计2020累计销售额将达到4.4亿元，实现净利润 超过1.76亿元，净利润率达到40.02%，为地方贡献税 收可超过4千万元，带动包括材料、制造、医学等多个领 域上、下游产业链的发展，创造社会效益10亿元。公司 的健康、快速发展将带动广州地区产业结构优化，推动 珠三角产业转型升级，并且对构建国内口腔医疗器械生 产集群，加快人才培养，提高区域的技术水平和学术水 平等起到不可估量的作用。\r\r职位城市：\r中国、广东省、广州市\r\r职位地址：\r广东省广州市南沙区\r\r投递邮箱：\rzhaopin@fsangels.com\r\r学历要求：\r博士\r\r经验：\r5_{8年\r\r*薪资：\r20}50k\r”,“field”:“其它领域”}}}

要求是将content里面的内容，遇到\r就换行，然而当我给标签的类加上了whtie-space: pre-wrap却一直没有换行

 <div class="footer">{{chat.demand.content}}</div>
        .footer {
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            white-space:pre-wrap;
            i.el-icon-success {
                color: $--color-primary;
                font-size: 20px;
                margin-right: 10px;
            }
        }

经过找了很久的原因之后，试了很多方法之后。当把要渲染的内容通过v-html来显示，white-space: pre-wrap就生效了。

<div class="footer" v-html="chat.demand.content"></div>