当前位置: 首页 > news >正文

vue超过三行显示省略号和查看更多按钮

1、超过3行显示省略号和更多按钮,不超过3行正常显示;

html:

<div class="container"><div style="display: flex;"><div class="content"><div class="text-content" ref="textContentRef">{{ 文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容 || '-' }}</div></div><div class="btn"></div></div> </div>

js:

mounted () {this.$nextTick(() => {setTimeout(() => {    // 一定要加定时器,不然拿不到文本高度this.handleResume()}, 500);})
}
handleResume () {const maxHeight = 54 // 3行的高度,可以根据实际情况调整const btn = document.querySelector('.btn')const content = document.querySelector('.content')const textContent = document.querySelector('.text-content')const textHeight = textContent.getBoundingClientRect().height // 文本高度const contentHeight = content.getBoundingClientRect().height  // 容器高度// console.log(textHeight,'textHeight----');// console.log(maxHeight,'maxHeight------');btn.innerHTML = '...更多'let flag = falseif (textHeight <= maxHeight) {// btn.innerHTML = ''btn.style.display = 'none'} else {btn.style.display = 'block'}btn.addEventListener('click', () => {if (!flag) {content.style.maxHeight = textHeight+'px' // 铺开展示btn.innerHTML = '收起'flag = true} else {content.style.maxHeight = contentHeight+'px' // 铺开展示btn.innerHTML = '...展开'flag = false}})
},

css:

.container {position: relative;
}
.content {max-height: 54px;overflow: hidden;transition: max-height 0.5s;}
.text-content {font-size: 14px;line-height: 18px;
}
.btn {position: absolute;right: 0;bottom: 2px;background: linear-gradient(to right, rgba(255,255,255,0.2), #fff 35%);padding-left: 25px;color: #409eff;cursor: pointer;font-size: 14px;
}

效果图:

超过3行:
在这里插入图片描述
没超过3行:
在这里插入图片描述

相关文章:

vue超过三行显示省略号和查看更多按钮

1、超过3行显示省略号和更多按钮&#xff0c;不超过3行正常显示&#xff1b; html: <div class"container"><div style"display: flex;"><div class"content"><div class"text-content" ref"textContentR…...

【软考速通笔记】系统架构设计师⑤——软件工程基础知识

文章目录 一、前言二、基础知识点2.1 软件危机2.2 软件生命周期 三、软件过程模型&#xff08;论文&#xff09;3.1 瀑布模型3.2 原型模型3.3 螺旋模型3.4 敏捷模型3.5 软件统一过程模型3.6 软件成熟度模型3.7 软件成熟度模型集成 四、需求工程五、软件测试5.1 根据程序执行状态…...

Qt 详解QRubberBand

文章目录 QRubberBand 简介前言 QRubberBand 的作用QRubberBand 的主要功能QRubberBand 的常用方法QRubberBand 的典型应用场景示例代码总结 QRubberBand 简介 前言 在 Qt 中&#xff0c;QRubberBand 是一个非常实用的控件&#xff0c;它通常用于图形界面中的“选择区域”功能…...

HTB:Love[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 使用nmap对靶机开放端口进行脚本、服务扫描 使用浏览器访问靶机443端口 尝试利用该功能访问靶机自身80端口 使用ffuf对靶机80端口进行路径FUZZ 漏洞利用 使用searchsploit搜索靶机80端…...

【RabbitMQ 消息列队测试之:调试技巧】

RabbitMQ 消息列队测试之:调试技巧 1. 使用 RabbitMQ 管理界面2. 启用日志记录3. 使用 `rabbitmqctl` 命令行工具4. 检查和分析死信队列(DLQ)5. 监控系统资源6. 性能测试工具:`rabbitmq-perf-test`7. 使用工具调试消息内容8. 检查和调整消费者处理速率9. 启用长时间运行的测…...

Ubuntu FTP服务器的权限设置

在Ubuntu中设置FTP服务器的权限&#xff0c;主要涉及到用户权限管理和文件系统权限设置。以下是详细的步骤和配置方法&#xff1a; 安装FTP服务器软件 首先&#xff0c;确保已经安装了FTP服务器软件。常用的FTP服务器软件包括vsftpd和Pure-FTPd。以下是使用vsftpd作为示例的安…...

@Pattern (用于校验字符串是否符合特定正则表达式)

Pattern 是一个用于校验字符串是否符合特定正则表达式的注解&#xff0c;它在 Java 中常用于验证输入数据的格式。以下是 Pattern 注解的详解和使用方法&#xff1a; 含义 Pattern 注解用于在 Java 中对字段进行注解&#xff0c;以确保其值与指定的正则表达式匹配。这个注解可…...

5G学习笔记之随机接入

目录 1. 概述 2. MSG1 2.1 选择SSB 2.2 选择Preamble Index 2.3 选择发送Preamble的时频资源 2.4 确定RA-RNTI 2.5 确定发送功率 3. MSG2 4. MSG3 5. MSG4 6. 其它 6.1 切换中的随机接入 6.2 SI请求的随机接入 6.3 通过PDCCH order重新建立同步 1. 概述 随机接入…...

webGL入门教程_03GLSL、OpenGL、WebGL 定义及关系

GLSL、OpenGL、WebGL 定义及关系 1. 定义 1.1 GLSL&#xff08;OpenGL Shading Language&#xff09; 定义&#xff1a; GLSL 是 OpenGL 的着色器语言&#xff0c;用于编写 GPU 可编程着色器&#xff0c;定义图形渲染过程中顶点和像素&#xff08;片元&#xff09;的处理逻辑。…...

git基本操作说明

一 基本操作说明 Git常用命令&#xff1a; clone、push、add、commit、checkout、pull。 流程如下&#xff1a; 仓库说明&#xff1a; workspace&#xff1a;工作区staging area&#xff1a;暂存区/缓存区local repository&#xff1a;版本库或本地仓库remote repository&…...

微知-git如何添加空目录的几种方式?(.gitkeep, githook, gitconfig)

背景 在Git中&#xff0c;空目录&#xff08;空文件夹&#xff09;默认是不会被跟踪的&#xff0c;因为Git主要跟踪文件的变化。但是如何让git添加空目录&#xff1f; #mermaid-svg-3Y4NksLyEeuMs4FC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-si…...

MySQL 数据库学习教程一:开启数据库探索之旅

在当今数字化时代&#xff0c;数据已然成为企业和组织最为宝贵的资产之一。而数据库管理系统则是存储、管理和操作这些数据的核心工具。MySQL 作为一款广泛应用的开源关系型数据库管理系统&#xff0c;以其可靠性、高性能和易用性而备受青睐。如果你渴望踏入数据库领域&#xf…...

Vue+Elementui el-tree树只能选择子节点并且支持检索

效果&#xff1a; 只能选择子节点 添加配置添加检索代码 源码&#xff1a; <template><div><el-button size"small" type"primary" clearable :disabled"disabled" click"showSign">危险点评估</el-button>…...

Lumos学习王佩丰Excel第十八讲:LOOKUP函数与数组

一、回顾统计函数 1、使用SUMIF函数 sumif(条件区域,求和条件,求和区域) 2、使用SUMIFS函数 SUMIFS(求和范围, 条件范围1, 条件1, 条件范围2, 条件2, ...) 二、认识数组 1、数组生成原理 所谓数组&#xff0c;是有序的元素序列。组成数组的各个变量称为数组的元素。对于Ex…...

Git的基本使用操作

文章目录 Git 全局配置基本操作Git 常用命令版本回退根据版本号回滚分支远端分支 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Git专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月1日12点50分 Git 全局配置 虽然说是全局配置&am…...

【C语言】结构体嵌套

结构体嵌套是指在一个结构体中定义另一个结构体作为其成员。这种方式可以实现更复杂的数据结构设计&#xff0c;便于对数据进行分层管理和组织&#xff0c;广泛应用于实际开发中&#xff0c;例如操作系统内核、嵌入式系统、网络协议解析等。下面是对结构体嵌套的详细介绍&#…...

PDF view | Chrome PDF Viewer |Chromium PDF Viewer等指纹修改

1、打开https://www.browserscan.net/zh/ 2、将internal-pdf-viewer改为 internal-pdf-viewer-jdtest看下效果&#xff1a; 3、源码修改&#xff1a; third_party\blink\renderer\modules\plugins\dom_plugin_array.cc namespace { DOMPlugin* MakeFakePlugin(String plugin_…...

maxun爬虫工具docker搭建

思路来源开源无代码网络数据提取平台Maxun 先把代码克隆到本地&#xff08;只有第一次需要&#xff09; git clone https://github.com/getmaxun/maxun.git 转到maxun目录 cd maxun 启动容器 docker-compose --env-file .env up -d 成功启动六个容器 网址 http://local…...

JAVAWeb之javascript学习

1.js引入方式 1. 内嵌式&#xff1a;在head中&#xff0c;通过一对script标签引入JS代码&#xff1b;cript代码放置位置有一定的随意性&#xff0c;一般放在head标签中&#xff1b;2.引入外部js文件 在head中&#xff0c;通过一对script标签引入外部JS代码&#xff1b;注意&…...

vue3中是如何实现双向数据绑定的

在 Vue 3 中&#xff0c;双向数据绑定主要通过 v-model 指令实现。v-model 是一个语法糖&#xff0c;它内部实际上结合了 v-bind 和 v-on 指令来实现数据的双向绑定。下面详细介绍 Vue 3 中双向数据绑定的实现原理和使用方法。 双向数据绑定的基本原理 v-bind 指令&#xff1…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...