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

2024-02-05 10:12

本文主要是介绍两种方式实现文本超出指定行数显示展开收起...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

在这里插入图片描述

在这里插入图片描述

方法一:通过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.chinasem.cn/article/680583

相关文章

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类:一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如,如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项,那么就查看 drivers/scsi/aha1542.c 文件,一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P