0
0

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

目录

效果演示

在这里插入图片描述

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

步骤一：实现整体框架

<divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </span><spanclass='expand-button export-btn-group'>
      展开
    </span></div><divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </span><spanclass='expand-button export-btn-group'>
      展开
    </span></div><divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><spanclass='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所以，实现了一个元素前方插入文本的方法)constaddContentBefore=(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);}};constgetMoreText=()=>{// 获取文本容器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();

完整代码

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </span><spanclass='expand-button export-btn-group'>
      展开
    </span></div><divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </span><spanclass='expand-button export-btn-group'>
      展开
    </span></div><divclass='export-info-bar'><spanclass='ellipsis-text export-info-text'>
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span><spanclass='expand-button export-btn-group'>
      展开
    </span></div><scripttype="text/javascript">// 元素前方插入文本constaddContentBefore=(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);}};constgetMoreText=()=>{// 获取文本容器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>
标签： 前端
本文转载自: https://blog.csdn.net/qq_48617322/article/details/140702647
版权归原作者 Nyingchi-X 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

在Ubuntu22.04中安装PyCharm(保姆级教程)

Linux 6种查看日志方法

解锁Mac虚拟化新境界：Parallels Desktop 19 永久授权升级密钥推荐

IDEA项目提交至SVN&GIT仓库

SpringBoot 整合 RabbitMQ

大数据新视界 -- 大数据大厂之 数据导入：优化数据摄取的高级技巧（下）（4/ 30）

使用Python爬虫提取网站文章的点赞量和阅读量（绝对值得一看）高级爬虫

文章导航