脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端文本超出指定行数展开收起

前端实现文本超出指定行数显示"展开"和"收起"效果详细步骤

 更新时间：2024年10月12日 10:29:14   作者：Nyingchi-X  
本文介绍如何使用JavaScript原生代码实现文本折叠展开效果,并提供方法指导如何在Vue或React等框架中修改实现,详细介绍了创建整体框架、设置样式及利用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>

总结 

到此这篇关于前端实现文本超出指定行数显示”展开”和”收起”效果的文章就介绍到这了,更多相关前端文本超出指定行数展开收起内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript事件流之事件处理和传播机制深入理解

    JavaScript事件流之事件处理和传播机制深入理解

    本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读者深入理解并应用这一重要的前端技术,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • js中浮点型运算BUG的解决方法说明

    js中浮点型运算BUG的解决方法说明

    本篇文章主要是对js中浮点型运算BUG的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript稀疏数组的成因、坑点与解决方案

    JavaScript稀疏数组的成因、坑点与解决方案

    在 JavaScript 开发中,稀疏数组是一个极易被忽视但高频踩坑的知识点,本文将从本质、成因、实战坑点、解决方案四个维度,来理解这个稀疏数组,需要的朋友可以参考下
    2026-03-03
  • 将Datatable转化成json发送前台实现思路

    将Datatable转化成json发送前台实现思路

    将Datatable转化成json可以将dt序列化成json，放到前台的隐藏控件hidBoundary中，具体的实现如下，有类似需求的朋有可以参考下
    2013-09-09
  • JavaScript实现更换背景图片

    JavaScript实现更换背景图片

    这篇文章主要为大家详细介绍了JavaScript实现更换背景图片,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JavaScript浏览器内置的四大Web Worker的使用详解

    JavaScript浏览器内置的四大Web Worker的使用详解

    webwork是通过js的方式唤起浏览器的内置api使用,辅助前端计算的一种方式,就像fetch、ajaix那样唤起浏览器的接口查询一样,下面小编就为大家简单介绍一下吧
    2025-11-11
  • JavaScript 中的运算符和表达式介绍

    JavaScript 中的运算符和表达式介绍

    这篇文章主要介绍了JavaScript 中的运算符和表达式介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • JS中的事件委托实例浅析

    JS中的事件委托实例浅析

    这篇文章主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下
    2018-03-03
  • SwfUpload在IE10上不出现上传按钮的解决方法

    SwfUpload在IE10上不出现上传按钮的解决方法

    在测试中发现使用了SwfUpload实现的无刷新上传功能，在IE10上竟然无法使用了，难道SwfUpload不支持吗？下面与大家分享下通过修改SwfUplad.JS文件让其支持ie10
    2013-06-06
  • 小程序如何写动态标签的实现方法

    小程序如何写动态标签的实现方法

    这篇文章主要介绍了小程序如何写动态标签的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论