后端返回数据中的换行符，在标签中不显示换行的解决方法

最新推荐文章于 2023-08-30 10:56:58 发布
最新推荐文章于 2023-08-30 10:56:58 发布
阅读量2k 收藏 3
点赞数
分类专栏： React 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46448392/article/details/112698692
版权

后端返回的的数据

在Chrome浏览器上
Chrome浏览器上后端返回的数据
页面显示：
在这里插入图片描述
如果使用

let text = "后端返回字符串"
text.replace(/\n/g,"<br/>")

并不会使前端内容换行，只是字符串里面的回车替换成了<br/>

处理方法:

给标签添加css样式：white-space: pre-wrap; 或使用<pre></pre>标签 即可达到换行目的

Curtis丶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MySQL数据中很多换行符和回车符的解决方法
01-19
发现问题 今天一大早客户给我打电话：“小陈儿，昨晚我往数据库导了几十万条数据，然后在...如：库中数据为：“换行符\n换行符\n换行符”，然后在界面通过如下SQL查询，那自然是搜不到咯！ SELECT * from `LOL` where
php 字符串中的\n换行符无效、不能换行的解决方法
12-19
程序的中的换行符\n会直接输出，无法正确换行，解决方法是把单引号改为双引号：复制代码 代码如下:&lt;?phpecho “hello\n”;echo “world”;?>这样就可以了！其实就是PHP的双引号和单引号的区别问题，简单个概括...
后端返回字符串中带换行符，前端需转换
dianmei9350的博客
07-03 5520
let remarkStr =' ' remarkStr = remarkStr.replace(/\n/g,"&lt;br/>") this.remark = remarkStr &lt;span v-html="remark">&lt;/span> 　另外原生参考方法： https://www.itransl...
php 换行输出_后台返回数据中有换行符，但是在文本中不显示换行效果
weixin_39907939的博客
12-04 902
换行由来Unix系统里，每行结尾只有“&lt;换行>”，即"n"；Windows系统里面，每行结尾是“&lt;换行>&lt;回车 >”，即“nr”；Mac系统里，每行结尾是“&lt;回车>”，即"n"；。一个直接后果是，Unix/Mac系统下的文件在 Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一...
前端通过后端传过来的'\n' ,'&lt;br/>'等字符串换行失败问题
热门推荐
玩大神的CSDN的博客
04-20 1万+
后台推送换行符 ‘\n’ 或 ‘&lt;br/>’ 等字符串到前台不会换行 详细描述 后台逻辑处理返回String字符串，其中包含\n或&lt;br/>等换行符号，但是前端渲染时候却并没有真正的换行 也尝试了大佬的各种 \r\n,&lt;br/>,&lt;br/&gt;等都没有作用 解决方案 下面的解决方案来自https://www.jianshu.com/p/...
字符串输出到.txt的文本,无法使用\n进行换行
NULL
08-20 5899
  我们发现并没有换行 使用java中的转义符"\r\n":      效果图                   
后端返回的数据中换行符 html换行
a_靖的博客
10-22 3976
标签代码 &lt;span v-html="model3_txt">&lt;/span> vue js代码 var txt ="恭喜你\n获得某某某奖品"; if(txt.indexOf('\n')!=-1){ var reg = new RegExp("/r/n", "g"); txt=txt.replace(reg, "&lt;br/>"); conso...
去除数据中字符串的换行符；解决ETL中字符串换行符；ORACLE|DB2
12-02
- - 使用此工具，必须有明确的行分隔符标记，且换行符标记不可在字符串中出现。否则无法使用，需要修改匹配搜索方式 ### 工具效率： 亲测200M文件5s中完成转换。 ### 使用示例： Windows: go_readfileline.exe...
Oracle除去数据中的换行符以免读取出现问题
12-16
很多数据存进数据库后，可能需要将整条数据取出，并用特殊符号分割，而且整条数据必须是处于一行，如此，如果数据出现 换行的情况，那么读取时就有问题。 这个时候就需要对即将取出的数据做特殊的处理，也就是 除去...
后端传过来的文本带有换行符 需要在小程序页面中也正常换行展示
filerat的博客
11-20 620
后端传过来的文本带有换行符 需要在小程序页面中也正常换行展示 直接在样式中加入white-space：pre-wrap会去解析换行 注意：加入white-space：pre-wrap的标签内容前后一定不能有空格和换行必须贴紧标签 最终效果: ...
后端返回的数据\n,在前端页面不换行
qq_41964720的博客
08-04 580
后端返回的数据带\n,在前端的页面并没有显示换行。
前端通过后端返回的字符串（＜br/＞\＜/n＞），换行失败
Lycoriy的博客
02-22 4037
后端返回字符串带有、等换行符，在前端页面无法正常渲染出换行效果，尝试使用str.replace(/(&lt;br\/>)/g, '\n').replace(/(&lt;\/n>)/g, '\n')方法没有效果，只是将后端返回换行符的位置变成的空格，但是控制台输出可以看到换行效果。 解决方法 给包含换行符字符串的元素增加css white-space:pre-wrap; 就可以解决这个问题。 附上white-space的定义用法以及可能的值 查看官方定义 ...
前端通过后端传的字符串‘\n‘，换行失败
weixin_50013077的博客
12-14 1267
等换行符号，但是前端却并没有实现换行。增加下面的CSS即可。
后台获得的信息前台显示不换行问题
qq_36522689的博客
02-12 709
后台获得的信息前台显示不换行问题 问题描述： 后台获得的信息描述是有换行的，但是显示却没有换行 我的解决方案 在显示数据的标签上加样式 &lt;text style="white-space: pre-wrap;">{{value.productDesc}}&lt;/text> 注： white-space 控制换行的样式 ...
前端处理后端返回的数据中有\n\n字样的换行符标识
张张张的博客
08-08 5139
上面圈着的部分就是\n，前端需要将数据进行换行，对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的。pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时会换行。使用v-html输出文本。以上两种方法都可以实现。
数据写入txt文件中，出现无法换行的问题
黑手黛博拉的博客
06-10 2006
使用如下方法对txt文件中的内容进行换行时，出现无法换行的问题。 f.write("\n") 此时可使用下面的方法换行 f.write("\r\n") 一般来说，在 Linux中换行是\n ，winddows中换行是 \r\n ,在linux中用\n写入的文字，在window中用记事本打开是没有换行的，所以我们可以统一使用\r\n进行换行。 ...
asp textbox 多行限制只能输入两行_多行文本省略的JS解决方案
weixin_39637711的博客
11-20 283
前言在项目开发过程中，经常会遇到溢出文本的省略问题。根据需求，可以把文本省略分为单行文本省略和多行文本省略两类。单行文本的省略，现在css样式 text-overflow 已经有兼容性很好的样式支持了。但是多行文本，目前只有支持webkit内核的css样式 -webkit-line-clamp 可以做到，只是它针对火狐浏览器就行不通了。这就是本文要解决的问题。css解决方案（可跳过）如果上网搜索【...
后端接口数据带‘\n’时，渲染数据自动换行
woaijskxh的博客
08-30 279
当后端接口返回的字符串内带有‘\n’时，可以通过在style中使用 ‘white-space: pre-line’这个属性。自动识别" \n "，完成换行显示。
前端接收后端返回换行符 /n 不生效
m0_47791238的博客
07-30 1872
问题：前端接收后端返回换行符 /n 不换行、不生效。
python将无换行符字符串按照中文标点习惯换行的函数
最新发布
09-14
首先，我们需要将字符串中的无换行符文本按照指定的字符数进行切割，并在适当的位置插入换行符。以下是一个简单的函数示例，可以实现这一功能： ```python def newline_string(text, length): lines = [] current...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值