给文本加了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>

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

css 下划线_（06）CSS 给文本加样式：② 文本属性 | CSS
原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...
《Java SE实战指南》05-05：空白字符（White Space）
内容导航: 前言 1.定义 2.缩进 3.空格 4.空行 1.定义空白字符(White Space),包括ASCII空格符.水平制表符.换页符和行终止符,主要用来格式化代码. 2.缩进 4个空格,还 ...
stm32中c语言换行符error——expect a declaration warning——“\“followed by white space is not a line splic
标题 stm32中c语言换行符error--expect a declaration warning--""followed by white space is not a lin ...
Visual Studio Tip 之如何查看隐形的空格(white space)和制表符(tab)
许多软件公司对于自己源代码的格式有这严格的规定, 比如说缩进的时候应该用多少个空格, 或多少个制表符都是不能有差错的. 然而, 三个空格和四个空格有很明显的区别么? 四个空格和一个制表符光靠肉眼容易分 ...
如何给一个文字文本加圆或是加矩形呢？
在AUTOCAD制图过程中,小伙伴们是否有遇到过类似的问题,就是如何给一个文字文本加圆或是加矩形呢?小编在制图过程中就经常会遇到,后来我找到了一个非常方便好用的方法,可以快速完成这一操作,那就是加 ...
线上问题处理-feign调用报错（Illegal character ((CTRL-CHAR, code 31)): only regular white space (\r, \n, \t) ）
线上问题处理-feign调用报错业务场景:服务1通过Feign调用服务2,测试阶段一切正常,线上有数据丢失(为避免敏感本地简单复现了下).报错如下: 2021-12-04 13:47:47.774 ...
only regular white space (\r, \n, \t) is allowed between tokens
Caused by: com.fasterxml.jackson.core.JsonParseException: Illegal character ((CTRL-CHAR, code 31)): ...
HTML中的pre标签表示空格或换行
1.用法场景保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...
PIXI 精灵及文本加载（4）
预习下官网的知识. 及字母消除接上文 Pixi 精灵 Pixi拥有一个精灵类来创建游戏精灵.有三种主要的方法来创建它: 用一个单图像文件创建. 用一个雪碧图来创建.雪碧图是一个放入了你游戏所需的所 ...
android 记一次富文本加载之路
文章链接:https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw 项目中经常涉及到富文本的加载,后台管理端编辑器生成的一段html 代码要渲染到移动端上面, ...

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

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

最新文章

热门文章