【React 轮子】文本溢出后显示展开/收起按钮

news2024/11/23 12:23:33

在这里插入图片描述
在这里插入图片描述

/** hooks
 * 用于文本展示时判断是否展示 展开/收起按钮 (包含监听 文本变化/页面尺寸变换)
 * @param { string } text 需要展示的文本
 * @param { number } maxLength 文本最大展示行数
 * @param { number } lineHeight 文本行高 (单位 px)
*/ 
import React, { useEffect, useRef, useState } from 'react';
export const TruncatedText = ({ text,lineHeight,maxLength }) => {
	// 用于判断目前展开与否
  const [isTruncated, setIsTruncated] = useState(true);
  //是否需要显示 展开收起按钮
  const [shouldShowMore, setShouldShowMore] = useState(false);
  
  const containerRef = useRef(null);

  useEffect(() => {
      const checkTruncation = () => {
          if (containerRef.current) {
            const { scrollHeight } = containerRef.current;
              setShouldShowMore(scrollHeight > lineHeight*maxLength);
          }
      }; 
      checkTruncation(); // 初次检查
    	// 监听页面缩放
      const resizeObserver = new ResizeObserver(checkTruncation);
      if (containerRef.current) {
          resizeObserver.observe(containerRef.current);
      }

      return () => {
          if (containerRef.current) {
              resizeObserver.unobserve(containerRef.current);
          }
      };
  }, [text]);

  const toggleTruncate = () => {
      setIsTruncated((prev) => !prev);
  };
 
  return (
    <div
      style={{
        position: 'relative',
        display: '-webkit-box',
        overflow: 'hidden',
        maxHeight: isTruncated ? `calc(${lineHeight}px * ${maxLength})` : 'none',
        transition: 'max-height 0.2s ease',
        fontSize: '14px',
        lineHeight: `${lineHeight}px`,
      }}
    >
      <span ref={containerRef} style={{display:'inline-block'}} >
        {text}
      </span>
      {shouldShowMore && (
          <a
            onClick={toggleTruncate}
            style={{
              background: '#fff',
              position: 'absolute',
              bottom: 0,
              right: 0,
            }}
          >
              {isTruncated ? ' -展开' : '收起'}
          </a>
      )}
    </div>
  );
};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python | Leetcode Python题解之第523题连续的子数组和

题目&#xff1a; 题解&#xff1a; class Solution:def checkSubarraySum(self, nums, k):d {0: -1}pre 0for index, num in enumerate(nums):pre numrem pre % ki d.get(rem, index)if i index:d[rem] indexelif i < index - 2:return Truereturn False

基于Matlab的图像去噪算法仿真

在信息化的社会里&#xff0c;图像在信息传播中所起的作用越来越大。所以&#xff0c;消除在图像采集和传输过程中而产生的噪声&#xff0c;保证图像受污染度最小&#xff0c;成了数字图像处理领域里的重要部分。 本文主要研究分析邻域平均法、中值滤波法、维纳滤波法及模糊小…

【计算机网络 - 基础问题】每日 3 题(五十九)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

滚珠导轨的存放与防锈保养

机床导轨是机床的重要组成部分&#xff0c;如果导轨生锈会影响机床的使用寿命和精度&#xff0c;因此必须采取措施进行防止。导轨生锈的原因主要是受到外界环境中的空气中的氧气和水蒸气等导致金属表面氧化腐蚀&#xff0c;另外&#xff0c;储存不当也会引起生锈。 一、滚珠导轨…

图技术发展简史

图数据库技术的本质是图计算与存储技术&#xff08;事实上所有IT技术在本质上都是计算、存储与网络&#xff0c;因为计算有网络计算、分布式计算&#xff0c;存储有网络存储、分布式存储&#xff0c;因此我们经常省略网络而只说计算和存储&#xff09;​&#xff0c;而图计算&a…

【C/C++】字符/字符串函数(1)——由string.h提供

零.导言 什么是字符/字符串函数呢&#xff1f; 其实就是一类用于处理字符和字符串的函数。 而其中一部分函数包含在头文件 string.h 中&#xff0c;有 strlen strcpy strcat strcmp strncpy strncat strncmp strstr strtok strerror 等等 接下来我将逐个讲解这些函数。 一.str…

【Linux】从内核角度理解 TCP 的 全连接队列(以及什么是 TCP 抓包)

文章目录 概念引入理解全连接队列内核方面理解Tcp抓包方法注意事项 概念引入 我们知道&#xff0c;TCP的三次握手是由TCP协议 自动处理的&#xff0c;建立连接的过程与用户是否进行accept无关&#xff0c;accept()的作用主要是为当前连接创建一个套接字&#xff0c;用于进行后…

【Spring】Spring Boot 日志(8)

本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 目录 本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 …

ElementUI学习笔记

一、ElementUI概述 官网&#xff1a;https://element.eleme.cn/#/zh-CN &#xff08;一&#xff09;定义 Element&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是基于Vue的一个UI框架&#xff0c;该框架基于Vue开发了很多相关组件&#xf…

Ubuntu如何创建一个子用户并赋与管理员权限

在Ubuntu操作系统中,如何创建一个子用户并赋与管理员权限 一、创建用户 sudo useradd -m -s /bin/bash test详细解释: sudo:以超级用户(root)权限执行该命令。useradd 命令通常需要管理员权限,因此需要加上 sudo。 useradd:创建新用户的命令。 -m:指示系统为新用户创建…

Java项目实战II基于Java+Spring Boot+MySQL的工程教育认证的计算机课程管理平台(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着工程教…

18 实战:基于Tkinter和OpenCV的视频编码器:实现MPEG4矩形帧编码器

引言 在视频处理领域,视频编码器的设计与实现一直是研究的热点。本文将深入解析一段基于Python的代码,该代码利用Tkinter、OpenCV和NumPy库构建了一个MPEG4矩形帧编码器的图形用户界面(GUI)。通过详尽的代码讲解,帮助读者全面理解视频编码的基本原理及其在实际应用中的实…

SmartX 在新能源:支撑多家头部企业 MES 等核心系统稳定运行与 VMware 替换

在过去几年中&#xff0c;中国新能源企业经历了迅猛的增长。随着电池技术、光伏发电和风电等领域的不断进步&#xff0c;新能源企业不仅面临生产能力的提升需求&#xff0c;还需要优化运营效率和管理复杂度&#xff0c;其基础设施建设则需要不断升级以适应这种快速扩展的需求&a…

ELK配置转存redis缓存,采集nginx访问日志

在136服务器上部署mysql 启动mysql服务 可通过以下命令查找安装的软件包 怎么查找安装软件的日志文件位置rpm -qc mysql-server&#xff0c;即可显示mysql.log位置 也可通过查找配置文件中的log关键字来查找log文件日志位置 用awk命令&#xff0c;以切割&#xff0c;输出第二个…

诱骗取电快充协议芯片,支持与其它 MCU 共用 D+D-网络和电脑传输数据

前言 在科技日新月异的今天&#xff0c;快充技术已成为智能手机、平板电脑乃至笔记本电脑等电子设备不可或缺的一部分。各大厂商为了提升用户体验&#xff0c;纷纷推出了自家的快充协议&#xff0c;这些协议不仅让充电速度大幅提升&#xff0c;还带来了更加智能、安全的充电体验…

ubuntu20.04 加固方案-设置用户缺省UMASK

一、编辑/etc/profile配置文件 打开终端。 查看当前umask 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/profile文件。 sudo vim /etc/profile 二、添加配置参数 在打开的配置文件的末尾中&#xff0c;添加或修改以下参数&#xff1a; umask 027 三、保存并退出…

高阶数据结构--图(graph)

图&#xff08;graph&#xff09; 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…

全渠道供应链打造中企业定制开发2+1链动模式S2B2C商城小程序的策略与影响

摘要&#xff1a;本文探讨了全渠道供应链打造对于零售企业的重要性及面临的挑战&#xff0c;着重分析了物流环节整合的难点&#xff0c;并以家电行业为例说明了节假日期间物流对企业经营的影响。同时&#xff0c;引入“企业定制开发21链动模式S2B2C商城小程序”这一关键因素&am…

Oracle视频基础1.3.3练习

1.3.3 检查数据库启动情况 ps -ef | grep oracle启动数据库 sqlplus /nolog conn / as sysdba修改 fast_start_mttr_target 参数为初始值-50&#xff0c;缺省 scope 和 sid&#xff0c;查看修改结果 show parameter fast; alter system set parameter 250; show parameter fa…

ArcGIS005:ArcMap常用操作101-150例动图演示

摘要&#xff1a;本文涵盖了GIS软件操作的多方面内容&#xff0c;包括地图文档的新建、打开、保存及版本兼容性处理&#xff1b;错误与警告的查阅及帮助文档的使用技巧&#xff1b;地图打印比例尺的调整与地图信息的完善&#xff1b;图层操作的撤销与恢复&#xff0c;界面元素的…