vue文本识别"\n"换行问题的解决方式
作者：D_jing20
在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过标签换行,也可以通过\n转椅字符换行,下面这篇文章主要给大家介绍了关于vue文本识别“\n”换行问题的解决方式,需要的朋友可以参考下
在 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
}
总结
到此这篇关于vue文本识别“\n”换行问题解决的文章就介绍到这了,更多相关vue文本识别\n换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！