vue中实现文字超过2行... 展开-收起(兼容ie)

先看看实际效果

2.需求一步一步分析
当文字超出省略号就想到css样式实现（ie不兼容）

      overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;

3.由于自己也是一个懒人、就想在网上找找、看了几篇文章都是根据width、height来计算的看了一下写的比较复杂、都只是针对单个文本来的、现实中一般都是列表展示数据的
代码如下：复制代码即可运行、兼容ie

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 中文字超过2行显示省略号 展开-收起</title><style>.content {display: flex;margin-bottom: 30px;}.text {position: relative;font-size: 14px;line-height: 20px;letter-spacing: 2px;color: #666666;}.retract {position: relative;overflow: hidden;}.retract:after {content: '...';position: absolute;bottom: 0;right: 2px;width: 25px;padding-left: 30px;background: linear-gradient(to right, transparent, #fff 45%);}.btn {position: absolute;right: 0;bottom: -30px;font-size: 14px;line-height: 19px;letter-spacing: 2px;color: #FFAD41;cursor: pointer;}.more {font-size: 14px;line-height: 20px;letter-spacing: 2px;color: #666666;visibility: hidden;}</style>
</head><body><div id="app"><div class="view"><div class="text more" ref="more">占位</div><div class="content" v-for="(item, index) in curData" :key="index"><div class="text"><div :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" ref="textContainer">{{item.desc}}</div><div class="btn"><p v-if="item.status" @click="item.status = false">展开</p><p v-if="item.status == false" @click="item.status = true">收起</p></div></div></div></div></div>
</body></html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>new Vue({el: '#app',data() {return {curData: [{ desc: '人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。' },{ desc: '小说刻画人物的方法：心理描写、动作描写、语言描写、外貌描写、神态描写，同时，小说是一种写作方法。' },{ desc: '与其他文学样式相比，小说的容量较大，它可以细致地展现人物性格和人物命运，可以表现错综复杂的矛盾冲突，同时还可以描述人物所处的社会生活环境。优势是可以提供整体的、广阔的社会生活。' },{ desc: '纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(出自墨人钢《就是》创刊题词)便是所谓的“纯”。也就是说，小说在构思及写作的过程中能去尽政治谎言、道德谎言、商业谎言、维护阶级权贵谎言、愚民谎言等谎言，使呈现出来的小说成品具备纯粹的艺术性。小说的纯粹性是阅读者最重要的审美期待之一。随着时代的发展，不光是小说，整个文学的纯粹性逾来逾成为整个世界对文学审美的一个重要核心。' }],textHeight: null}},mounted() {this.curData.forEach((ele, index) => {this.$set(this.curData, index, Object.assign({}, ele, { status: null }))})// DOM 加载完执行this.$nextTick(() => {this.calculateText()})window.onresize = () => {this.curData.forEach((ele, index) => {this.$set(this.curData, index, Object.assign({}, ele, { status: null }))})setTimeout(() => {this.calculateText()}, 0)}},methods: {// 计算文字 显示展开 收起calculateText() {// 获取一行文字的height 计算当前文字比较列表文字let oneHeight = this.$refs.more.scrollHeightlet twoHeight = oneHeight * 2 || 40this.textHeight = `${twoHeight}px`let txtDom = this.$refs.textContainerfor (let i = 0; i < txtDom.length; i++) {let curHeight = txtDom[i].offsetHeightif (curHeight > twoHeight) {this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true }))} else {this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null }))}}}}})
</script>

分析代码
- 省略号通过:after伪类实现
- 文字一行高度、在浏览器中展示都有所区别、所以在这里我在页面放置了一段占位文本设置了隐藏占位
- 通过获取占位文本的高度 * 2 计算出2行文本内容动态改变status状态 null-无展开收起 true-展开 false-收起结合max-height实现
- 注意⚠️ 解析完数据由于dom没加载完 ref获取不到需要在 **this.nextTick∗∗中获取ref值此时dom加载完或者使用setTimeout(fn,0)延时解决this.nextTick**中获取ref值此时dom加载完或者使用setTimeout(fn,0)延时解决 this.nextTick∗∗中获取ref值此时dom加载完或者使用setTimeout(fn,0)延时解决this.set用法自行了解

5.完结（不明白可以提问交流、谢谢）

vue中实现文字超过2行... 展开-收起(兼容ie)相关推荐

Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
Android中实现类似qq好友列表展开收起的效果
最近两天学习实现了一个功能,感觉很好,一定要记录下来. 在网上找了一些资料,林林总总,总是不那么齐全,有的代码做成小Demo还会报错,需要自己调试半天.也幸好如此,我将此功能涉及到的一些知识点理解的更 ...
css字太多了省略_纯CSS实现文字超过n行后省略功能
在切图阶段,经常会遇到,设计稿要求超出n行后剩余文字省略,并用...代替的需求.类似于下图单行文字单行文字时实现比较容易,使用overflow: hidden和text-overflow: ell ...
table中的内容超过2行自动显示Tooltip
当我们在table中的某列内容过多时,会撑开td的高度,导致非常的难看本文介绍的是,当内容超过两行时,超出的部分用 - 代替,并且鼠标悬浮时,会显示出所有的内容但是当内容未超过两行时,鼠标悬浮时不 ...
html - - - 文字超过三行显示省略号，文字超过几行显示省略号
代码 /* 文字三行以上显示省略号 */ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*超出内容为省略号*/ display: -we ...
vue中滚动文字公告（2）-transition-slide
思路: 利用js代码控制显示内容,用<transition>改变过渡样式优势:效果可调劣势:代码较多代码: <template><div><div cl ...
vue中实现文字间加空格的方法
下面这个方法偶然间试出来的,可行:必须要同时设置word-spaceing 和 \xa0 <div style="word-spacing:10px">车{{" ...
实现表格中每行展开收起内容
效果图: html: <table><tr><th style="width:130px;">类型</th><th style ...
其他行展开收起_长居清迈的家庭，去台湾依旧可以自由行？手把手教你网上申请赴台证...
台北@西门町 8月份有朋友告诉我们,在大陆叫停台湾自由行之后,持泰国长居签证的大陆居民,依旧可以向曼谷的驻泰国台北经济文化办事处申请台湾自由行,而且全程只需要在网上提交资料+缴费+下载许可证,高兴坏了 ...

vue中实现文字超过2行... 展开-收起(兼容ie)

vue中实现文字超过2行... 展开-收起(兼容ie)相关推荐

最新文章

热门文章