laravel-vue后端返回数据的字符串中（＜br/＞ \n）换行无效

最新推荐文章于 2023-12-27 16:59:51 发布
最新推荐文章于 2023-12-27 16:59:51 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js laravel 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/N_x1122/article/details/129086095
版权

laravel 做后端，vue做前端，后端返回数据的字符串中含有 <br/> 或 \n \r\n 等换行符，在前端页面无法正常渲染出换行效果，尝试用str.replace方法无效，最终找到解决办法

解决办法

给包含换行符的字符串元素增加css

white-space:pre-wrap

附上 white-space 的定义用法以及可能的值
官网- https://www.w3school.com.cn/cssref/pr_text_white-space.asp
在这里插入图片描述

阿雪_N
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML不编译成标签，直接生成字符串解决办法
qq_37465264的博客
04-11 3554
function ToHtmlString(htmlStr) {   return toTXT(htmlStr).replace(/\&amp;lt\;br[\&amp;ensp\;|\&amp;emsp\;]*[\/]?\&amp;gt\;|\r\n|\n/g, "&lt;br/&gt;");}function toTXT(str) {   var RexStr = /\&lt;|\&gt;|\...
laravel-vue:laravel-vue 代码生成器 vue 模板
05-01
在"laravel-vue-master"这个压缩包中，包含的是已经初始化好的项目源码，开发者可以直接克隆或下载到本地进行开发。项目结构通常会包含Laravel的目录结构，如app、database、public、resources、routes等，以及Vue....
vue中换行符不换行、不生效的处理(\n或者＜br＞)
热门推荐
编程界明世隐的博客
03-10 4万+
先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d
vue中v-html识别\n换行
hnnd123的博客
05-06 1万+
如果需要合并空格可以使用： 附：white-space属性（来源于MDN） normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 pre 连续的空白符会被保留。在遇到换行符或者元素时才会换行。 pre-wrap 连续的空白符会被保留。在遇到换行符...
vue换行符不生效
weixin_45774432的博客
03-24 751
回车符在html标签中默认转化为 \n const msg = ‘aaaaaaaaa\nbbbbbbbbb’ {{ msg }} 效果： aaaaaaaaabbbbbbbbbb 解决办法： 一： 为div添加样式：white-space: pre-wrap 即可 {{ msg }} 或者 二： 将 \n 替换成 , const msg = str.replace(’/\n/g, ‘’) ...
br 标签兼容问题
appxu的博客
07-23 2314
在一个开发项目中遇到一个问题——br在火狐以及ie浏览器下的高度问题，br在火狐下没有高度，可以换行，br在ie下换行，但是同时br还有一行的高度，这就造成了网页在不同浏览器下的兼容性问题。这个bug，要解决。 经过反复的调试发现，给br加上背景颜色可以解决高度的问题，消掉br在ie下的高度。代码： br{ background:red;} 但是这个设置了一个背景颜色，运用到项目中肯定是不行
前端通过后端返回的字符串（＜br/＞\＜/n＞），换行失败
Lycoriy的博客
02-22 4072
后端返回字符串带有、等换行符，在前端页面无法正常渲染出换行效果，尝试使用str.replace(/(<br\/>)/g, '\n').replace(/(<\/n>)/g, '\n')方法没有效果，只是将后端返回换行符的位置变成的空格，但是控制台输出可以看到换行效果。 解决方法 给包含换行符字符串的元素增加css white-space:pre-wrap; 就可以解决这个问题。 附上white-space的定义用法以及可能的值 查看官方定义 ...
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
Laravel Mix v5-Vue 3 适用于Vue 3，Typescript和JSX的Laravel ...vue3 --save-dev// oryarn add @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 -D然后，在您的webpack.mix.js文件中要求它，
laravel-vue-admin：开箱即用的Laravel后台扩展，前分离，纵向控制前端组件，无需编写vue即可创建一个vue + vuex + vue-route + elment-ui + laravel的项目，丰富的表单表格组件，强大的自定义组件功能
02-03
Laravel-Vue-Admin是一个开箱即用的Laravel后台扩展 vue + vuex + vue-route + elment-ui + laravel的项目 内置了丰富的表单表格组件 最核心的是强大的自定义组件功能 安装 首先确保安装好了laravel，和数据库连接...
laravel-vue-admin：Laravel和vue-element-admin前一级分离的后台管理系统
02-10
Laravel-Vue-Admin ...Laravel-vue-Admin中项目文档 编码云仓库地址 安装 composer require frey/laravel-vue-admin 配置 添加提供者到config / app.php。 'providers' => [ //... Tymon \ JWTAuth \ Pr
laravel-vue-admin:Laravel + Vue实现前阶段分离的后台管理系统https
03-11
laravel-vue-admin是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ Laravel的前分离框架。后台所需要的功能模块 前一级分离设计，前端代码在admin目录，除以前后台页面；细分代码在laravel目录下， 主要技术...
vue 后台返回\n换行前端显示、后端返回字符区分中英文换行显示（replace替换）
leng0920的博客
12-22 1913
vue 后台返回\n换行前端显示、后端返回字符区分中英文换行显示（replace替换）
vue \n无法换行 解析成空格怎么办
最新发布
anwenagululu的博客
12-27 1225
指令来解析包含HTML标签的文本，这样就可以正常渲染换行。文本的换行符（\n）却无法正常换行，而是被替换为空格。1. 使用CSS样式来处理文本的换行，通过设置。2. 保留文本中的空白字符并渲染换行，可以使用。
前端接收后端返回换行符 /n 不生效（Vue）
m0_46390103的博客
09-27 1724
前端接收后端返回换行符 /n 不生效（Vue）
vue使用v-html填充文本时/n未生效
80岁小姑娘的博客
10-27 329
1、使用v-html 时在div上加上一下 white-space:pre。
vue中解决字符串无法换行问题
g1437353759的博客
11-24 1419
degree就是那个储存内容的string 一开始在后面加了br发现当成字符串展示了 后来发现只需要把字符串放在pre里面，把之前的br换成’\n’就能用了
vue文本识别 “ \n ” 的换行问题
甜心的专栏
09-05 1万+
在 vue 项目，有时请求返回的数据中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。一、通过 css属性 实现：设置 white-space: pre-wrap;二、使用v-html实现：首先，将字符串里的 \n 替换为 ，然后用 v-html 指令渲染字符串为 innerHTML 。三、标签：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
laravel文字+链接（英文字符）--多行换行处理
qq_39111074的博客
01-24 820
laravel框架中：一个模块中，有一些文字，文字中可能包含超链接，要让超链接正常显示，且让中文后紧跟英文，英文也换行显示： 1.HTML相关处理 前端从后端获取到的超链接数据形式 是 HTML实体，要将数据进行处理 转换成 字符，页面上以超链接形式显示 php 中：html_entity_decode() 函数把 HTML 实体转换为字符 html_entity_decode() 函数是 htmlentities() 函数的反函数。 laravel框架里 ，html 页面中加上 html_entity_d
vue中关于字符串内含有\n和＜br＞的换行符的不同显示的解决方法
weixin_42484910的博客
03-13 760
【代码】vue中关于字符串内含有\n和的换行符的不同显示的解决方法。
vue 路由缓存不生效
02-07
Vue 路由缓存不生效的原因可能有以下几种： 1. 未在路由配置中设置 `meta: { keepAlive: true }`。为了使缓存生效，你需要在路由配置中加入这个字段。例如： ``` { path: '/example', component: Example, meta: { keepAlive: true } } ``` 2. 在组件内未使用 `<keep-alive>` 标签包裹缓存组件。在组件内，你需要使用 `<keep-alive>` 标签将缓存组件包裹起来。例如： ``` <template> <keep-alive> <example /> </keep-alive> </template> ``` 3. 在组件内使用了 `this.$router.replace()` 或 `this.$router.push()` 方法替换了当前路由。这两个方法会导致组件卸载，从而使缓存失效。 4. 在组件内未正确处理路由参数的变化。如果路由参数发生了变化，但组件内未正确处理，则缓存也可能失效。例如，可以在组件内监听 `$route` 对象的变化，并在发生变化时执行相应的操作。 如果以上建议无法解决问题，建议你可以尝试检查是否有其他代码导致了路由缓存失效，或者可以尝试在 Vue 官方论坛或其他技术社区寻求帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值