两种方式实现文本超出指定行数显示展开收起...

需要实现这样一个功能
默认高度下文本超出隐藏,点击展开可查看所有内容,点击收起可折叠

在这里插入图片描述

在这里插入图片描述

方法一:通过html和css实现
代码部分
html:<div className="expand-fold"><input id="check-box" type="checkbox" /><div className="content">{/* htmlFor和input的id一致 */}<label className="label" htmlFor="check-box"></label><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicaboquas architecto perspiciatis voluptas odio magni dolorem doloribusrecusandae commodi accusamus voluptates, laudantium tempora, estsoluta blanditiis labore tempore officia ipsam! Lorem ipsum dolorsit amet consectetur adipisicing elit. Explicabo quas architectoperspiciatis voluptas odio magni dolorem doloribus recusandaecommodi accusamus voluptates, laudantium tempora, est solutablanditiis labore tempore officia ipsam!</span></div></div>css:.expand-fold {display: flex;#check-box { // 将勾选框隐藏display: none;}#check-box:checked + .content { // 选中勾选框(点击展开)时修改最大高度,合理即可max-height: 800px;}#check-box:checked + .content .label { // 展开时,隐藏省略号,文字改为收起&::before {// 隐藏省略号content: '';}&::after {content: '收起';}}.content { font-size: 16px;flex: 1;max-height: 46px;line-height: 23px;overflow: hidden;&::before { // 将展开/收起文字对齐最右边content: '';float: right;height: calc(100% - 23px);}}.label { // 展开收起文字部分position: relative;float: right;clear: both;font-size: 16px;padding: 0 8px;color: #26caf8;border-radius: 4px;cursor: pointer;&::before { // 默认展开时添加省略号content: '...';position: absolute;left: -5px;color: #333;transform: translateX(-100%);}&::after {content: '展开';}}}
方法二:通过AntDesign + react实现组件封装
AntDesign默认只有展开功能,没有收起功能,以下是基于Typography组件实现展开收起
组件UI部分
import { Typography } from 'antd';
import React, { useState } from 'react';
import style from './index.less';const { Paragraph } = Typography;export type ExpandTextType = {rows?: number;symbol?: React.ReactNode;foldSlot?: React.ReactNode;children?: React.ReactNode;
};const defaultSymbol = () => (<span className="ant-typography">展开 <i className="iconfont icon-jiantou-shaixuanzhankai"></i></span>
);const Example: React.FC<ExpandTextType> = (props) => {const { rows = 2, symbol = defaultSymbol(), foldSlot } = props;const [ellipsis, setEllipsis] = useState(false);const [counter, setCounter] = useState(0);const onFold = () => {setEllipsis(!ellipsis);setCounter(counter + 1);};const onExpand = () => {setEllipsis(!ellipsis);setCounter(counter + 0);};// 自定义收起文案const renderFold = () => {return (<a className="ant-typography-fold" onClick={onFold}>{foldSlot ? (foldSlot) : (<span>收起<i className="iconfont icon-jiantou-shaixuanzhankai icon-fold"></i></span>)}</a>);};return (<div className={style['container']}><Paragraphkey={counter}ellipsis={{rows,expandable: true,symbol,onExpand,}}>{props?.children}{ellipsis && renderFold()}</Paragraph></div>);
};export default Example;
组件css
.container {:global {.ant-typography {margin-bottom: 0;}.ant-typography-expand,.ant-typography-fold {color: #089cdb;font-size: 13px;cursor: pointer;height: 17px;line-height: 17px;margin-left: 4px;.iconfont.icon-jiantou-shaixuanzhankai {display: inline-block;font-size: 10px;transform: rotate(90deg);}.iconfont.icon-jiantou-shaixuanzhankai.icon-fold {transform: rotate(-90deg);margin-left: 4px;}}}
}
页面使用组件
import ExpandText from '@/components/ExpandText'; 
import style from './index.less';export type ExampleType = unknown;
const Example: React.FC<ExampleType> = () => {return (<div className={style.container}><ExpandText>这里放入要展示的文案内容啊...</ExpandText></div>);
};export default Example;

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

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

相关文章

【Android】240204 android studio build.gradle.kts APK名字带日期

通过Android studio 生成 APK 名字的时候&#xff0c;带年月日时&#xff0c;可以在 build.gradle 里面定义&#xff1b; 在Gradle脚本的build任务中&#xff0c;每当我构建项目时&#xff0c;我都希望获得当前时间戳&#xff0c;并将其保存到项目资源目录中的文件中。如果我理…

04-尚硅谷Vue_Vue中的ajax

文章目录 1. 解决开发环境 Ajax 跨域问题 【前端】尚硅谷Vue2-Vue3全家桶笔记目录贴 1. 解决开发环境 Ajax 跨域问题

Camunda会签、或签、比例签

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;说在前面 …

EasyX图形库学习(二、文字输出)

目录 一、文字绘制函数 字体属性结构体:logfont 文字输出 outtextxy 在指定位置输出字符串。 ​编辑 但如果直接使用,可能有以下报错&#xff1a; 三种解决方案&#xff1a; 将一个int类型的分数,输出到图形界面上 如果直接使用&#xff1a; 会把score输入进去根据A…

【C/C++ 13】C++11高效特性

目录 一、初始化列表 二、auto 三、decltype 四、可变参数列表 五、lambda表达式 C11在C98的基础上增添了许多特性&#xff0c;但是同时也使得C程序的开发变得复杂繁琐&#xff0c;让众多开发者苦不堪言&#xff0c;于是我们需要从C11新增舔的特性中选择一些能够提高开发效…

ROS从入门到精通4-1:Docker安装与常用命令总结

目录 0 专栏介绍1 Docker与机器人应用2 Docker安装步骤3 Docker常用命令3.1 创建与启动容器3.2 暂停与删除容器3.3 容器文件拷贝3.4 构建镜像与上下文 0 专栏介绍 本专栏旨在通过对ROS的系统学习&#xff0c;掌握ROS底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS进…

【文件增量备份系统】前端项目构建

文章目录 创建项目安装项目依赖引入element plus组件下载组件在main.js中使用组件测试 整合路由router下载组件创建路由管理器index.js使用路由App.vue上面使用 <router-view />测试 整合axios下载组件工具类axiosRequest.js工具类使用 创建项目 damwangrunqindeMBP dev…

车载测试中:如何处理 bug

一&#xff1a;Jira 提交 bug 包含那些内容 二&#xff1a;如何处理现上 bug 三&#xff1a;车载相关的 bug 如何定位 四&#xff1a;遇到 bug &#xff0c;复现不出来怎么办 五&#xff1a;bug 的处理流程 一&#xff1a;Jira 提交 bug 包含那些内容二&#xff1a;如何处理现上…

Java设计模式-模板方法模式(14)

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对…

uniapp android和微信小程序如何实现PDF在线预览

Hello大家好&#xff01;我是咕噜铁蛋&#xff0c;UniApp在开发移动应用时提供了跨平台的解决方案&#xff0c;能够同时支持Android和iOS系统&#xff0c;而微信小程序则是一种轻量级的应用形式&#xff0c;可以在微信内直接运行。本文将探讨如何利用UniApp和微信小程序实现PDF…

k8s学习-Kubernetes的网络

Kubernetes作为编排引擎管理着分布在不同节点上的容器和Pod。Pod、Service、外部组件之间需要⼀种可靠的方找到彼此并进行通信&#xff0c;Kubernetes网络则负责提供这个保障。 1.1 Kubernetes网络模型 Container-to-Container的网络 当Pod被调度到某个节点&#xff0c;Pod中…

java数组学习

目录 1.数组概念 2.数组的定义 3.数组的静态初始化 4.地址值 5.数组元素访问 6.索引 7.数组的遍历 8.数组的动态初始化 9.数组两种初始化方式的区别 10.数组常见问题 1.数组概念 数组是一种容器&#xff0c;可以同来存储同种数据类型的多个值。但是数组容器在存储数据…

Redis核心技术与实战【学习笔记】 - 24.Redis 脑裂

简述 所谓脑裂&#xff0c;就是指在主从集群中&#xff0c;同时有两个主节点&#xff0c;它们都能接收写请求。而脑裂最直接的影响就是客户端不知道该往哪个主节点写入数据&#xff0c;结果就是不同的客户端会往不同的主机诶点上写入数据。而且&#xff0c;严重的话&#xff0…

从零开始手写mmo游戏从框架到爆炸(三)— 服务启动接口与网络事件监听器

上一章我们完成了netty服务启动的相关抽象&#xff08;https://blog.csdn.net/money9sun/article/details/136025471&#xff09;&#xff0c;这一章我们再新增一个全局的服务启动类&#xff0c;方便后续扩展。 服务启动 新增的两个类如下&#xff1a; 定义一个接口IServer …

Elasticsearch:使用 Inference API 进行语义搜索

在我之前的文章 “Elastic Search 8.12&#xff1a;让 Lucene 更快&#xff0c;让开发人员更快”&#xff0c;我有提到 Inference API。这些功能的核心部分始终是灵活的第三方模型管理&#xff0c;使客户能够利用当今市场上下载最多的向量数据库及其选择的转换器模型。在今天的…

npm出现 Error: EISDIR: illegal operation on a directory, read

npm出现 Error: EISDIR: illegal operation on a directory, read 一、问题二、解决 一、问题 可能是由于运行了npm config set cafile ""之类的方法,造成了cafile为空 二、解决 文件位于C:\Users\用户名\ 下 找到c盘下的Users下的用户目录&#xff0c;进入找到.n…

框架学习Maven

声明&#xff1a;本文来源于黑马程序员PDF讲义 做为一名Java开发工程师&#xff0c;后端 Web开发技术是我们学习的重点&#xff0c;后端Web开发技术的学习&#xff0c;我们会先学习Java项目的构建工具&#xff1a;Maven 初识Maven Maven是Apache旗下的一个开源项目&#xff…

Verilog实现2进制码与BCD码的互相转换

1、什么是BCD码&#xff1f; BCD码是一种2进制的数字编码形式&#xff0c;用4位2进制数来表示1位10进制中的0~9这10个数。这种编码技术&#xff0c;最常用于会计系统的设计里&#xff0c;因为会计制度经常需要对很长的数字做准确的计算。相对于一般的浮点式记数法&#xff0c;…

14.1 Ajax与JSON应用(❤❤)

14.1 Ajax与JSON应用 1. Ajax1.1 简介1.2 Ajax使用流程1. 前端创建XMLHttpRequest对象2. 发送Ajax请求3. 处理服务器响应4. 代码2. JSON2.1 简介2.2 JS解析JSON3. Ajax与JSON开发3.1 后端:用Jackson实现JSON序列化输出3.2 前端Ajax处理JSON3.3 Ajax工具

总结反思在部署上线短链接项目过程中所踩到的坑

总结反思在部署上线短链接项目过程中所踩到的坑 不容易&#xff0c;自己从零到一手敲的短链接项目&#xff0c;中间遇到了不少的曲折&#xff0c;终于部署上线了。 项目的上线地址&#xff1a;短链接系统 由于没有 2 核 4 g 服务器&#xff0c;就使用了两台 2 核 2 g 丐版服务…