vue文本识别"\\n"换行问题的解决方式
作者:D_jing20 时间:2024-05-09 10:51:43
在 vue 项目,有时请求返回的数据 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行。
一、通过 css属性 实现
设置 white-space: pre-wrap; 代码如下:
<div style="white-space: pre-wrap;">{{含有\n的字符串}}</div>
扩展:
white-space属性值:
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
二、使用v-html实现
首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 innerHTML 。 代码如下:
// JS部分
this.text = res.data.replace(/\n/g,'<br>')
// HTML部分
<div v-html="text"></div>
三、<pre>标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。代码如下:
<pre>{{含有\n的字符串}}</pre>
注意:在选择<pre>标签时,如果文字太长的行可能会撑开固定宽度的容器或者超出容器范围。解决方法:
pre {
//方法一:保留空白符序列,但是正常地进行换行。
white-space: pre-wrap;
//方法二:添加横向滚动条
overflow-x: auto;
}
最后,虽然三种方法都可以实现,但本人比较推荐前两种。
附实践模块,温馨提示 基于vant改造
效果图: 并且点击黄色部分会进行伸缩
html部分
<div>
<!-- 文字较长时,通过禁用 scrollable 属性关闭滚动播放 -->
<van-notice-bar
v-if="deptTip"
background="#FFFBE8"
:scrollable="false"
wrapable
>
<div @click="showAllFn" v-cloak id="showAllclamp2" :class="[showAll?'':'clamp2']">
<van-icon style="float: left;line-height: 24px;padding-right: 7px;" name="volume-o" ></van-icon>
<div id="deptTip" v-html="deptTip"></div>
</div>
<template v-slot:right-icon>
<van-icon style="position: absolute;right: 5px;bottom: 10px;" :name="icon" ></van-icon>
</template>
</van-notice-bar>
</div>
css部分
.clamp2{
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
js 部分
隐藏和展示的时候
showAllFn(){
this.showAll=!this.showAll
this.showAll?this.deptTip=this.deptTip.replace(/\n/g,'<br>'):this.deptTip=this.deptTip2
}
来源:https://blog.csdn.net/u012320487/article/details/126702839
标签:文本识别,\n,换行
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django在Model保存前记录日志实例
2023-10-05 03:01:29
PHP中include和require的使用详解
2023-10-22 03:57:03
Python集合的增删改查操作
2023-09-30 00:48:18
python库skimage给灰度图像染色的方法示例
2021-09-07 14:33:49
![](https://img.aspxhome.com/file/2023/7/114477_0s.jpg)
SQL学习笔记四 聚合函数、排序方法
2011-09-30 11:33:29
Sphinx生成python文档示例图文解析
2022-06-07 23:35:50
![](https://img.aspxhome.com/file/2023/7/86627_0s.jpg)
XML+ JS创建树形菜单
2013-08-22 08:30:17
Django更新models数据库结构步骤
2024-01-16 09:05:25
![](https://img.aspxhome.com/file/2023/7/133797_0s.jpg)
Python求导数的方法
2023-11-22 07:51:15
如何使用flask将模型部署为服务
2021-11-11 06:02:48
![](https://img.aspxhome.com/file/2023/3/95883_0s.png)
Linux下python3.7.0安装教程
2021-07-30 05:25:58
![](https://img.aspxhome.com/file/2023/7/90437_0s.jpg)
分享Python文本生成二维码实例
2023-12-16 09:42:28
Python实现SVN的目录周期性备份实例
2021-07-19 16:13:22
Python实现获取sonarqube数据
2023-02-26 04:38:30
Python批量修改文件名实例操作分享
2022-04-11 06:14:47
![](https://img.aspxhome.com/file/2023/4/80674_0s.png)
Go实现基于RSA加密算法的接口鉴权
2024-05-10 13:56:33
Java连接mysql数据库代码实例程序
2024-01-22 03:01:26
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2021-04-17 02:03:04
![](https://img.aspxhome.com/file/2023/2/89182_0s.jpg)
基于一致性hash算法(consistent hashing)的使用详解
2024-01-25 02:30:02
![](https://img.aspxhome.com/file/2023/8/109808_0s.jpg)
一文带你探寻Python中的装饰器
2021-07-11 10:17:59
![](https://img.aspxhome.com/file/2023/7/110077_0s.png)