亲宝软件园·资讯

展开

vue文本识别"\n"换行问题的解决方式

D_jing20 人气:0

在 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
        }

总结

加载全部内容

相关教程
猜你喜欢
用户评论