Vue完成数据请求后内容超出显示省略号+显示查看全文按钮

最新推荐文章于 2023-11-10 09:50:20 发布
VIP文章 最新推荐文章于 2023-11-10 09:50:20 发布
阅读量3.1k 收藏 12
点赞数 1
分类专栏： Vue.js CSS JavaScript 文章标签： Vue CSS 超出显示省略号 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Akikang/article/details/103718863
版权

需求：

如下图，当Vue完成数据请求后，根据文章内容设置显示方式。10行以内的显示全文，不显示【查看全文】按钮；内容超过指定行数时，超出内容隐藏，末尾显示省略号并显示【查看全文】按钮。

需求1

需求2

实现

思路

        在异步请求数据完成后，判断文章内容所在元素高度。根据元素高度控制元素class和按钮显示。

实践

/
最低0.47元/天 解锁文章
大陀螺
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让很多内容只显示一部分，然后点击展开显示全部
09-22
新闻内容，只显示部分，点击展开，可以显示全部新闻内容，点击收起，可以改变为只显示部分内容，通过JS截取字符串实现。
Vue 文本超过三行展示省略号，并加上展开和收起的功能
农码精神
12-09 6027
场景：在vue项目中文本超过三行展示省略号，并加上展开和收起的功能 在处理多行文本时，经常会遇到各种各样的需求，比如至多展示三行，多余的部分不展示并以省略号结尾；又比如在这个基础上加上一个展开和收起的功能。同时UI的展示上还要求和文本本身的位置相对应。 具体实现思路如下： 　　1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,渲染完后超过三倍的行高即认为是内...
vue 根据字符串的长度判断，字数超出显示省略号
最新发布
m0_73994018的博客
11-10 1033
【代码】vue 根据字符串的长度判断，字数超出显示省略号。
vue中内容超过三行省略并显示展开和关闭，不超过三行不显示
qq_43614064的博客
07-14 4864
css部分： 此时已经实现了第一步，但是我们会发现，即便文字只有一行，展开和关闭也会显示，这就不对了，所以我们要根据文字的行数来判断展开和关闭按钮的显示和隐藏 获得三行文本的高度：一行的高度*3，一行的高度可以通过占位的这个元素获得，获得数据后如果后续不改文本的样式就可以删掉了，留着影响布局。 获取文本的高度并比较： 全部代码： 图中老师简介少于3行所以没有展开和隐藏，课程简介大于3行，显示展开和隐藏。最后又路过的大佬可以跟我科普一下为啥下面这样写获得不了真正的文本高度，我看好多文章里面推荐的这种写法.
Vue + Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的方法
pleaseprintf的博客
08-21 1万+
在 Vue 项目中，经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示省略号，并且鼠标移上后展示全部内容的效果。通过本文，你已经学会了如何使用 Vue 和 Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的效果。这种效果可以提升用户体验，特别是在处理长文本内容的场景中。希望本文对你在 Vue 项目中实现文本省略号和 Tooltip 效果有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
Vue超出文本框显示省略号，鼠标滑入显示全部
ct5211314的博客
12-14 1万+
在开发过程中经常会遇到空间太小文字展示不全的问题，对于一些数据可能影响不大，但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了。解决办法：通过鼠标划入展示全部文字的效果用来解决。
vue中文字超出显示省略号的两种情况，css实现文字超出显示省略号
A1123352950的博客
09-12 3199
vue解决文本当行超出显示省略号，以及多行超出显示省略号的两种情况
vue 数据过长，省略号显示
qq_43741943的博客
03-02 719
数据过多，省略显示
vue 根据字符串的长度控制显示的字数超出显示省略号
shykevin的博客
03-12 8740
一、概述 经常会见到，标题或者字段超过多长，然后进行相关的截断，以下在vue当中，使用了vue的过滤器，很好的解决了这问题。 二、代码实现 test.vue <template> <div class="title">{{ name | ellipsis}}</div> </template> <script> expo...
vue 实现多行文本 超出行数后 省略号，出现查看全文按钮，点击 展示全文
旧忆时光的博客
04-08 3798
HTML <el-card class="box-card" shadow="hover" v-for="(moodEssayDate,index) in moodEssayDates" :key="moodEssayDate.pk_moodEssay"> <div class="card"> <div class="cardL...
vuejs数据超出单行显示更多，点击展开剩余数据实例
10-17
主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
表格单元格内容超出时显示省略号效果(实现代码)
09-24
下面小编就为大家带来一篇表格单元格内容超出时显示省略号效果(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
10-17
主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js 点击按钮显示/隐藏内容
06-21
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当...
vue2实现数据请求显示loading图
08-28
主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript获取value值的三种方法及注意点
热门推荐
Akikang的博客
06-25 11万+
  今天在js中用id名直接获取value值时遇到点问题，所以顺便做一下总结。   JavaScript获取value值，主要有以下三种：         1.用document.getElementById(“id名”).value来获取（例1）；         2.通过form表单中的id名或者name名来获取（例2）。        3.通过id名（不用写getElementById，也不...
设置input type为datetime-local时的最大值max
Akikang的博客
07-31 3672
<input type="datetime-local" /> Input标签 type为datetime-local时，键盘输入年份默认会在输入6个数字后自动跳转到月份的位置。 为了输入方便，给datetime加上最大值限制，控制在输入4位数字的年份后，第五位数字直接成为月份。 使用JavaScript实现，也是w3c上提供的方法https://www.w3schoo...
Vue+CSS实现渐变 半透明遮盖文字 点击显示全文取消遮盖
Akikang的博客
01-23 2800
1.目标效果 2.实现思路 默认指定列表最大高度，显示【显示全文】按钮，在显示全文前插入遮罩div。 点击显示全文后取消列表高度限制，隐藏【显示全文】按钮和遮罩div。 3.实现代码 html部分 <div class="notice_box"> <div> &l...
前端如何判断历史记录按钮超过2行展示下拉按钮 显示全部
07-08
要判断历史记录按钮是否超过2行，并展示下拉按钮来显示全部历史记录，可以使用以下步骤实现： 1. 使用 CSS 样式控制历史记录按钮的外部容器，设置固定的高度和 `overflow: hidden` 属性，限制容器的高度并隐藏溢出内容。 2. 使用 JavaScript 获取历史记录按钮的实际高度和容器的固定高度进行比较。 3. 如果历史记录按钮的实际高度超过容器的固定高度，则展示下拉按钮用于显示全部历史记录。 以下是一个示例代码： HTML： ```html <div class="history-container"> <div class="history-button">历史记录1</div> <div class="history-button">历史记录2</div> <div class="history-button">历史记录3</div> <div class="history-button">历史记录4</div> <!-- 更多历史记录按钮 --> <button id="showMoreButton" class="show-more-button">显示全部</button> </div> ``` CSS： ```css .history-container { height: 60px; /* 容器的固定高度，根据实际情况调整 */ overflow: hidden; } .history-button { margin-bottom: 8px; /* 按钮之间的间距，根据实际情况调整 */ } .show-more-button { display: none; /* 初始状态下隐藏显示全部按钮 */ } ``` JavaScript： ```javascript // 获取历史记录按钮的外部容器 const historyContainer = document.querySelector('.history-container'); // 获取显示全部按钮 const showMoreButton = document.getElementById('showMoreButton'); // 比较历史记录按钮的实际高度和容器的固定高度 if (historyContainer.scrollHeight > historyContainer.clientHeight) { showMoreButton.style.display = 'block'; // 如果实际高度超过固定高度，则显示显示全部按钮 } ``` 通过以上代码，当历史记录按钮的实际高度超过容器的固定高度时，下拉按钮会显示出来，用户可以点击该按钮来展示全部历史记录。你可以根据实际情况调整容器的固定高度和按钮之间的间距。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值