场景：在vue项目中文本超过三行展示省略号，并加上展开和收起的功能

在处理多行文本时，经常会遇到各种各样的需求，比如至多展示三行，多余的部分不展示并以省略号结尾；又比如在这个基础上加上一个展开和收起的功能。同时UI的展示上还要求和文本本身的位置相对应。

具体实现思路如下：

　　1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,渲染完后超过三倍的行高即认为是内容超过了三行。

　　2、展示/收起状态的切换可以通过data中的参数来绑定

　　3、在底部使用position:absolute来绝对定位展开该在的位置。

　　4、根据业务需求来设定好展开和收起按钮需要呆的地方。

其中需要注意的点有

　　1、展开收起按钮的高度和行高要和原来文本的行高一致，不然会导致样式不统一。

　　2、获取文本的高度时要注意使用this.$nextTick()来保证DOM渲染完成后再获取高度

　　3、在不同场景下省略号可能不能够完全遮住最后几个字，可以通过调节空格，字体排布方式等办法来调整，或者不要把展开和文本放在同一行，另起一行并且在末尾打开省略文本的样式

下面是我在日常迭代中写的一个比较简单的三行展示省略号并带有展开收起功能的小例子。欢迎大佬们指正~

先上具体实现代码：

<template><div class="content-wrap"><div :class="['content', expande ? 'expande' : 'close']" ref="content">思路：1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,渲染完后超过三倍的行高即认为是内容超过了三行。2、展示/收起状态的切换可以通过data中的参数来绑定。3、在底部使用position:absolute来绝对定位展开该在的位置。4、根据业务需求来设定好展开和收起按钮需要呆的地方。</div><divclass="expande-button-wrap"v-if="needShowExpande"><div class="expande-button" @click="expandeClick" v-if="!expande"><span style="color: black">...</span> 展开</div><div class="expande-button" @click="expandeClick" v-else>收起</div></div></div>
</template>

<script>
export default {name: 'App',data() {return {expande: true,needShowExpande: false,}},methods: {expandeClick() {console.log('expandeClick')this.expande = !this.expande},},mounted() {this.$nextTick(() => {let lineHeight = 22if (this.$refs.content.offsetHeight > lineHeight * 3) {this.expande = falsethis.needShowExpande = true} else {this.expande = true}})},
}
</script>

.expande {height: auto;
}
.close {height: 65px;overflow: hidden;
}

Vue 文本超过三行展示省略号，并加上展开和收起的功能相关推荐

CSS文本超过两行用省略号代替(兼容所有浏览器)
CSS文本超过两行用省略号代替方法一:常规写法(只兼容Chrome内核浏览器) 方法二:可以兼容所有浏览器的方式( js + CSS实现 ) 方法三:可以兼容所有浏览器的方式( 纯CSS实现 ) 方 ...
【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
Vue文本内容超出显示省略号，超出显示tooltip提示
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 代码中有用到Element-UI的组件,还有会提示在Table组件中和 ...
Vue文本内容超出显示省略号，超出显示tooltip提示2.0
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 我用两种方式满足了需求,这是其中一种,想看另一种可以查看Vue文本内容 ...
css 文字超出三行展示省略号
文字超出三行显示省略号: <style type="text/css">div{width: 100px;overflow: hidden;text-overflow: ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...
【CSS】文字超过三行显示省略号...
代码: <!DOCTYPE html > <html ><head><meta http-equiv="Content-Type" con ...
html - - - 文字超过三行显示省略号，文字超过几行显示省略号
代码 /* 文字三行以上显示省略号 */ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*超出内容为省略号*/ display: -we ...
div中同时存在文本和数字超过两行出省略号
div中同时存在文本和数字超过两行出省略号设置文本超过两行出省略号出现下面问题,未到指定宽度就换行 width: 255px;overflow: hidden;text-overflow: elli ...

Vue 文本超过三行展示省略号，并加上展开和收起的功能

场景：在vue项目中文本超过三行展示省略号，并加上展开和收起的功能

Vue 文本超过三行展示省略号，并加上展开和收起的功能相关推荐

最新文章

热门文章