前端实现文本超出指定行数显示”展开”和”收起”效果

目录

      • 效果演示
      • 步骤一：实现整体框架
      • 步骤二：实现样式
      • 步骤三：js实现元素控制
      • 完整代码

效果演示

在这里插入图片描述

本文方法是利用js原生进行实现的，可根据相关vue或react语法进行相关的改写，并实现效果

步骤一：实现整体框架

 <div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div><div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div><div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div>

步骤二：实现样式

1、底部容器设置定位，按钮和文本容器利用z-index设计容器层级，并使按钮定位在右下角；
2、设置 高度=指定隐藏行数*一行文本的高度，此处一行高度为21px，指定两行隐藏，最大高度就为42px；
3、设置按钮背景为白色，覆盖在文本上方；

    /* 底部容器 */.export-info-bar {position: relative;/* overflow: hidden; */margin-top: 10px;}/* 文本 */.ellipsis-text {position: relative;/* float: left; *//* （***）设置最大高度为两行的高度 */max-height: 42px; display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;word-break: break-all;word-wrap: break-word;/* 设置文本在按钮下方 */z-index: 0; }/* 按钮前方省略号的样式 */.pseudo-element {color: #000;margin-right: 5px;}/* 按钮 */.expand-button {/* (***) 设置定位，使按钮与最后一行平行并覆盖在最后一行上方 */position: absolute;/* 设置按钮浮动在右方 *//* float: right; *//* 默认隐藏按钮 */display: none;/* 将按钮向上移动一行 */right: 0px;bottom: -3px;color: skyblue;/* 此处背景一定要设置， */background: #fff;}

步骤三：js实现元素控制

    // 元素前方插入文本(因为js没有无法设置：：before所以，实现了一个元素前方插入文本的方法)const addContentBefore = (element, content) => {// 创建一个新的伪元素const pseudoElement = document.createElement('span');pseudoElement.classList.add('pseudo-element');pseudoElement.textContent = content;// 将伪元素插入到目标元素的前面if (element.firstChild) {element.insertBefore(pseudoElement, element.firstChild);} else {element.appendChild(pseudoElement);}};const getMoreText = () => {// 获取文本容器const textContents = document.querySelectorAll('.export-info-text');// 获取按钮容器const expandButtons = document.querySelectorAll('.expand-button');// 检查文本是否有超出两行的文本，并显示展开按钮textContents.forEach((content, index) => {// 输出查看当前高度是否超过两行高度（根据当前字体大小进行适配）console.log(content.scrollHeight, content.clientHeight)if (content.scrollHeight > content.clientHeight) {expandButtons[index].style.display = 'block'; // 显示展开按钮addContentBefore(expandButtons[index], '...'); // 按钮前方模拟省略号}});// 为所有按钮绑定点击事件expandButtons.forEach((button, index) => {button.addEventListener('click', () => {// 切换文本的max-height属性，实现展开效果const content = textContents[index];if (content.style.maxHeight !== 'none') {// 如果未展开，展开所有文本content.style.maxHeight = 'none';button.textContent = '收起'; // 改变按钮文本addContentBefore(button, '');} else {// 如果已经展开，恢复到两行content.style.maxHeight = '42px'; // 恢复到两行的高度button.textContent = '展开'; // 恢复按钮文本addContentBefore(button, '...');}});});};getMoreText();

完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 文本超出两行显示省略号，并设置“展开”，“收起”效果--><style>/* 底部容器 */.export-info-bar {position: relative;/* overflow: hidden; */margin-top: 10px;}/* 文本 */.ellipsis-text {position: relative;/* float: left; *//* （***）设置最大高度为两行的高度 */max-height: 42px; display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;word-break: break-all;word-wrap: break-word;/* 设置文本在按钮下方 */z-index: 0; }/* 按钮前方省略号的样式 */.pseudo-element {color: #000;margin-right: 5px;}/* 按钮 */.expand-button {/* (***) 设置定位，使按钮与最后一行平行并覆盖在最后一行上方 */position: absolute;/* 设置按钮浮动在右方 *//* float: right; *//* 默认隐藏按钮 */display: none;/* 将按钮向上移动一行 */right: 0px;bottom: -3px;color: skyblue;/* 此处背景一定要设置， */background: #fff;}</style>
</head><body><div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div><div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div><div class='export-info-bar'><span class='ellipsis-text export-info-text'>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><span class='expand-button export-btn-group'>展开</span></div><script type="text/javascript">// 元素前方插入文本const addContentBefore = (element, content) => {// 创建一个新的伪元素const pseudoElement = document.createElement('span');pseudoElement.classList.add('pseudo-element');pseudoElement.textContent = content;// 将伪元素插入到目标元素的前面if (element.firstChild) {element.insertBefore(pseudoElement, element.firstChild);} else {element.appendChild(pseudoElement);}};const getMoreText = () => {// 获取文本容器const textContents = document.querySelectorAll('.export-info-text');// 获取按钮容器const expandButtons = document.querySelectorAll('.expand-button');// 检查文本是否有超出两行的文本，并显示展开按钮textContents.forEach((content, index) => {// 输出查看当前高度是否超过两行高度（根据当前字体大小进行适配）console.log(content.scrollHeight, content.clientHeight)if (content.scrollHeight > content.clientHeight) {expandButtons[index].style.display = 'block'; // 显示展开按钮addContentBefore(expandButtons[index], '...'); // 按钮前方模拟省略号}});// 为所有按钮绑定点击事件expandButtons.forEach((button, index) => {button.addEventListener('click', () => {// 切换文本的max-height属性，实现展开效果const content = textContents[index];if (content.style.maxHeight !== 'none') {// 如果未展开，展开所有文本content.style.maxHeight = 'none';button.textContent = '收起'; // 改变按钮文本addContentBefore(button, '');} else {// 如果已经展开，恢复到两行content.style.maxHeight = '42px'; // 恢复到两行的高度button.textContent = '展开'; // 恢复按钮文本addContentBefore(button, '...');}});});};getMoreText();</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/51705.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV库学习之cv2.Sobel函数

OpenCV库学习之cv2.Sobel函数

OpenCV库学习之cv2.Sobel函数 一、简介 cv2.Sobel是OpenCV库中用于边缘检测的函数。它基于Sobel算子&#xff0c;通过计算图像在水平和垂直方向上的一阶导数来检测边缘。Sobel算子是一种离散差分算子&#xff0c;能够有效地突出图像中的高频变化区域&#xff0c;即边缘。 二、…
阅读更多...
c-periphery RS485串口库文档serial.md（serial.h）（非阻塞读）（VMIN、VTIME）

c-periphery RS485串口库文档serial.md（serial.h）（非阻塞读）（VMIN、VTIME）

c-peripheryhttps://github.com/vsergeev/c-periphery 文章目录 NAMESYNOPSISENUMERATIONS关于奇偶校验枚举类型 DESCRIPTIONserial_new()serial_open()关于流控制软件流控制&#xff08;XON/XOFF&#xff09;硬件流控制&#xff08;RTS/CTS&#xff09;选择流控制方法 serial_…
阅读更多...
独立3D网络游戏《战域重甲》开发与上架经验分享

独立3D网络游戏《战域重甲》开发与上架经验分享

“ 小编阿麟&#xff1a;心之所向便是光&#xff0c;我们都是追光者!这位独立游戏开发者的产品能力已经不输给许多小团队&#xff0c;希望他的故事和经验分享&#xff0c;可以给走在同样道路上的朋友一些信心和帮助。 背景介绍 2023年年底的时候&#xff0c;我突然有一个很强的…
阅读更多...
防火墙简单学习

防火墙简单学习

文章目录 防火墙主要功能防火墙类型 防火墙主要功能 防火墙是一种网络安全设备&#xff0c;它通过监控和控制进出网络的数据包来保护内部网络不受外部攻击和威胁。防火墙的主要功能包括&#xff1a; 访问控制&#xff1a;防火墙可以限制哪些设备和用户可以访问网络资源&#x…
阅读更多...
硬件工程师笔面试真题汇总

硬件工程师笔面试真题汇总

目录 1、电阻 1&#xff09;上拉电阻的作用 2&#xff09;PTC热敏电阻作为电源电路保险丝的工作原理 2、电容 1&#xff09;电容的特性 2) 电容的特性曲线 3) 1uf的电容通常来滤除什么频率的信号 3、电感 4、二极管 1&#xff09;二极管特性 2&#xff09;二极管伏安…
阅读更多...
HVV | .NET 攻防工具库，值得您拥有！

HVV | .NET 攻防工具库，值得您拥有！

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…
阅读更多...
软考高级第四版备考--第32天（新一代信息技术及应用）

软考高级第四版备考--第32天（新一代信息技术及应用）

1、物联网 1.1技术基础 1.1.1感知层&#xff1a;由各种传感器构成&#xff0c;包括温度传感器&#xff0c;二维码标签、RFID标签和读写器&#xff0c;摄像头&#xff0c;GPS等感知终端。感知层是物联网识别物体、采集信息的来源。 1.1.2网络层&#xff1a;由各种网络&#x…
阅读更多...
《破解验证码：用Requests和Selenium实现模拟登录的终极指南》

《破解验证码：用Requests和Selenium实现模拟登录的终极指南》

两种模拟登录方式(图形验证码) 超级鹰 打码平台&#xff0c;用于识别验证码 requests模拟登录 from chaojiying import Chaojiying_Client import requests from requests import Session from lxml import etree #获取图片信息 def get_pic_info(img_name):chaojiying Ch…
阅读更多...
10个append()函数在Python程序开发中的创新应用

10个append()函数在Python程序开发中的创新应用

文末赠免费精品编程资料~~ 在Python编程的世界里&#xff0c;append()函数是列表操作中最常见的方法之一。它允许我们在列表的末尾添加一个元素&#xff0c;这一简单的功能却能激发无限的创造力。今天&#xff0c;我们将探讨append()函数在Python程序开发中的10种创新应用&…
阅读更多...
分布式文件存储行业解决方案和技术选型分析

分布式文件存储行业解决方案和技术选型分析

分布式文件存储行业解决方案和技术选型分析 前言 上一集&#xff0c;我们已经完成了初始化测试报告以及判断压测类型的实战&#xff0c;我们在文章的末尾提到了文件上传的问题以及文件存储的问题&#xff0c;也说了接下来的几集中&#xff0c;我们会讨论分布式文件存储的内容…
阅读更多...
代码随想录第23天|回溯

代码随想录第23天|回溯

39.组合总和 题目链接/文章讲解&#xff1a; 代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和&#xff08;对应「leetcode」力扣题目&#xff1a;39.组合总和&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩_bilibili 第一想法&#xff1a; 组合总和与第22天组合总…
阅读更多...
爬虫实战-掌上高考网实战

爬虫实战-掌上高考网实战

1.确定需求&#xff1a;爬取什么数据爬取大学名称 2.找到数据源地址数据在哪个链接中https://api.zjzw.cn/web/api/?keyword&page1&province_id&ranktype&request_type1&size20&top_school_id[3703,2461,659,3117,597,1724]&type&uriapidata/…
阅读更多...
2024电赛H题参考方案——自动行使小车

2024电赛H题参考方案——自动行使小车

目录 一、题目要求 二、参考资源获取 三、参考方案 1、环境搭建及工程移植 2、移植MPU6050模块 3、移植TB6612电机驱动模块 其他模块根据需要移植 总结 一、题目要求 小编自认为&#xff1a;此次H题属于控制类题目&#xff0c;相较于往年较为简单&#xff0c;功能也算单一&…
阅读更多...
Vue3响应式高阶用法之toRaw()

Vue3响应式高阶用法之toRaw()

Vue3响应式高阶用法之toRaw() 文章目录 Vue3响应式高阶用法之toRaw()一、简介二、使用场景2.1 性能优化2.2 与外部库的集成 三、基本使用3.1 创建响应式对象3.2 获取原始对象3.3 修改原始对象 四、功能详解4.1 toRaw的工作原理4.2 使用注意事项 五、最佳实践及案例5.1 性能优化…
阅读更多...
基于深度学习的智能手势识别系统

基于深度学习的智能手势识别系统

基于深度学习的石头剪刀布手势识别&#xff08;UI界面YOLOv8/v7/v6/v5代码训练数据集&#xff09; 引言 石头剪刀布是一种简单而有趣的游戏。通过基于深度学习的手势识别系统&#xff0c;我们可以自动检测和识别玩家的手势。本文将详细介绍如何构建一个石头剪刀布手势识别系统…
阅读更多...
C++类与对象-总结实践篇

C++类与对象-总结实践篇

为了总结熟悉类与对象相关的语法&#xff0c;本文通过实现经典的日期计算来练习巩固这一块的知识 目录 一、要实现的功能 二、难点分析 2.1 判断日期大小 2.2 日期加/减对应天数 2.3 两个日期相减 三、源代码 牛客网日期类相关练习题&#xff1a; 日期累加_牛客题霸_牛…
阅读更多...
Oracle 19c打Datapatch数据补丁报错处理

Oracle 19c打Datapatch数据补丁报错处理

Oracle 19c打Datapatch数据补丁报错处理 错误分析重新编译补丁验证安装完数据库补丁后，在数据补丁的步骤收到以下报错： Connecting to database...OK Gathering database info...done Bootstrapping registry and package to current versions...done Determining current s…
阅读更多...
【Java】韩顺平Java学习笔记 第19章 IO流

【Java】韩顺平Java学习笔记 第19章 IO流

文章目录 文件概述常用的文件操作创建文件获取文件信息目录的操作和文件删除流的分类各抽象类常用子类对象FileInputStreamFileOutputStreamFileReaderFileWriter 节点流和处理流概念BufferedReaderBufferedWriterBufferedInputStream & BufferedOutputStream 对象流&#…
阅读更多...
LeetCode 算法：搜索插入位置 c++

LeetCode 算法：搜索插入位置 c++

原题链接&#x1f517;&#xff1a;搜索插入位置 难度&#xff1a;简单⭐️ 题目 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(l…
阅读更多...
Python | TypeError: ‘module’ object is not callable

Python | TypeError: ‘module’ object is not callable

Python | TypeError: ‘module’ object is not callable 在Python编程中&#xff0c;遇到“TypeError: ‘module’ object is not callable”这类错误通常表明你尝试像函数一样调用了一个模块。这种错误通常是由于导入模块时的疏忽或误解导致的。本文将深入探讨此错误的根源&…
阅读更多...
最新文章

Copyright @ 2022~2023