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行显示省略号和更多按钮,不超过3行正常显示; html: <div class"container"><div style"display: flex;"><div class"content"><div class"text-content" ref"textContentR…...
【软考速通笔记】系统架构设计师⑤——软件工程基础知识
文章目录 一、前言二、基础知识点2.1 软件危机2.2 软件生命周期 三、软件过程模型(论文)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 中,QRubberBand 是一个非常实用的控件,它通常用于图形界面中的“选择区域”功能…...
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服务器的权限,主要涉及到用户权限管理和文件系统权限设置。以下是详细的步骤和配置方法: 安装FTP服务器软件 首先,确保已经安装了FTP服务器软件。常用的FTP服务器软件包括vsftpd和Pure-FTPd。以下是使用vsftpd作为示例的安…...
@Pattern (用于校验字符串是否符合特定正则表达式)
Pattern 是一个用于校验字符串是否符合特定正则表达式的注解,它在 Java 中常用于验证输入数据的格式。以下是 Pattern 注解的详解和使用方法: 含义 Pattern 注解用于在 Java 中对字段进行注解,以确保其值与指定的正则表达式匹配。这个注解可…...
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(OpenGL Shading Language) 定义: GLSL 是 OpenGL 的着色器语言,用于编写 GPU 可编程着色器,定义图形渲染过程中顶点和像素(片元)的处理逻辑。…...
git基本操作说明
一 基本操作说明 Git常用命令: clone、push、add、commit、checkout、pull。 流程如下: 仓库说明: workspace:工作区staging area:暂存区/缓存区local repository:版本库或本地仓库remote repository&…...
微知-git如何添加空目录的几种方式?(.gitkeep, githook, gitconfig)
背景 在Git中,空目录(空文件夹)默认是不会被跟踪的,因为Git主要跟踪文件的变化。但是如何让git添加空目录? #mermaid-svg-3Y4NksLyEeuMs4FC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-si…...
MySQL 数据库学习教程一:开启数据库探索之旅
在当今数字化时代,数据已然成为企业和组织最为宝贵的资产之一。而数据库管理系统则是存储、管理和操作这些数据的核心工具。MySQL 作为一款广泛应用的开源关系型数据库管理系统,以其可靠性、高性能和易用性而备受青睐。如果你渴望踏入数据库领域…...
Vue+Elementui el-tree树只能选择子节点并且支持检索
效果: 只能选择子节点 添加配置添加检索代码 源码: <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、数组生成原理 所谓数组,是有序的元素序列。组成数组的各个变量称为数组的元素。对于Ex…...
Git的基本使用操作
文章目录 Git 全局配置基本操作Git 常用命令版本回退根据版本号回滚分支远端分支 🏡作者主页:点击! 🤖Git专栏:点击! ⏰️创作时间:2024年12月1日12点50分 Git 全局配置 虽然说是全局配置&am…...
【C语言】结构体嵌套
结构体嵌套是指在一个结构体中定义另一个结构体作为其成员。这种方式可以实现更复杂的数据结构设计,便于对数据进行分层管理和组织,广泛应用于实际开发中,例如操作系统内核、嵌入式系统、网络协议解析等。下面是对结构体嵌套的详细介绍&#…...
PDF view | Chrome PDF Viewer |Chromium PDF Viewer等指纹修改
1、打开https://www.browserscan.net/zh/ 2、将internal-pdf-viewer改为 internal-pdf-viewer-jdtest看下效果: 3、源码修改: third_party\blink\renderer\modules\plugins\dom_plugin_array.cc namespace { DOMPlugin* MakeFakePlugin(String plugin_…...
maxun爬虫工具docker搭建
思路来源开源无代码网络数据提取平台Maxun 先把代码克隆到本地(只有第一次需要) 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. 内嵌式:在head中,通过一对script标签引入JS代码;cript代码放置位置有一定的随意性,一般放在head标签中;2.引入外部js文件 在head中,通过一对script标签引入外部JS代码;注意&…...
vue3中是如何实现双向数据绑定的
在 Vue 3 中,双向数据绑定主要通过 v-model 指令实现。v-model 是一个语法糖,它内部实际上结合了 v-bind 和 v-on 指令来实现数据的双向绑定。下面详细介绍 Vue 3 中双向数据绑定的实现原理和使用方法。 双向数据绑定的基本原理 v-bind 指令࿱…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)
在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
前端打包工具简单介绍
前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry(入口) 指定应用的起点文件,比如 src/index.js。 Module(模块) Webpack 把项目当作模块图,模块可以是 JS、CSS、图片等…...
Java高级 |【实验八】springboot 使用Websocket
隶属文章:Java高级 | (二十二)Java常用类库-CSDN博客 系列文章:Java高级 | 【实验一】Springboot安装及测试 |最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 Java高级 | 【实验三】Springboot 静…...
