快捷導(dǎo)航

前端實現(xiàn)文本超出指定行數(shù)顯示"展開"和"收起"效果詳細(xì)步驟

更新時間：2024年10月12日 10:29:14 作者：Nyingchi-X

本文介紹如何使用JavaScript原生代碼實現(xiàn)文本折疊展開效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

效果演示

本文方法是利用js原生進(jìn)行實現(xiàn)的，可根據(jù)相關(guān)vue或react語法進(jìn)行相關(guān)的改寫，并實現(xiàn)效果

步驟一：實現(xiàn)整體框架

 <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>

步驟二：實現(xiàn)樣式

1、底部容器設(shè)置定位，按鈕和文本容器利用z-index設(shè)計容器層級，并使按鈕定位在右下角；

2、設(shè)置 高度=指定隱藏行數(shù)*一行文本的高度，此處一行高度為21px，指定兩行隱藏，最大高度就為42px；

3、設(shè)置按鈕背景為白色，覆蓋在文本上方；

    /* 底部容器 */
    .export-info-bar {
      position: relative;
      /* overflow: hidden; */
      margin-top: 10px;
    }

    /* 文本 */
    .ellipsis-text {
      position: relative;
      /* float: left; */
      /* （***）設(shè)置最大高度為兩行的高度 */
      max-height: 42px; 
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      /* 設(shè)置文本在按鈕下方 */
      z-index: 0; 
    }

    /* 按鈕前方省略號的樣式 */
    .pseudo-element {
      color: #000;
      margin-right: 5px;
    }

    /* 按鈕 */
    .expand-button {
      /* (***) 設(shè)置定位，使按鈕與最后一行平行并覆蓋在最后一行上方 */
      position: absolute;
      /* 設(shè)置按鈕浮動在右方 */
      /* float: right; */
      /* 默認(rèn)隱藏按鈕 */
      display: none;
      /* 將按鈕向上移動一行 */
      right: 0px;
      bottom: -3px;
      color: skyblue;
      /* 此處背景一定要設(shè)置， */
      background: #fff;
    }

步驟三：js實現(xiàn)元素控制

    // 元素前方插入文本(因為js沒有無法設(shè)置：：before所以，實現(xiàn)了一個元素前方插入文本的方法)
    const addContentBefore = (element, content) => {
      // 創(chuàng)建一個新的偽元素
      const pseudoElement = document.createElement('span');
      pseudoElement.classList.add('pseudo-element');
      pseudoElement.textContent = content;

      // 將偽元素插入到目標(biāo)元素的前面
      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) => {
          // 輸出查看當(dāng)前高度是否超過兩行高度（根據(jù)當(dāng)前字體大小進(jìn)行適配）
          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屬性，實現(xiàn)展開效果
            const content = textContents[index];
            if (content.style.maxHeight !== 'none') {
               // 如果未展開，展開所有文本
              content.style.maxHeight = 'none';
              button.textContent = '收起'; // 改變按鈕文本
              addContentBefore(button, '');
            } else {
              // 如果已經(jīng)展開，恢復(fù)到兩行
              content.style.maxHeight = '42px'; // 恢復(fù)到兩行的高度
              button.textContent = '展開'; // 恢復(fù)按鈕文本
              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>
  <!-- 文本超出兩行顯示省略號，并設(shè)置“展開”，“收起”效果-->
  <style>
    /* 底部容器 */
    .export-info-bar {
      position: relative;
      /* overflow: hidden; */
      margin-top: 10px;
    }

    /* 文本 */
    .ellipsis-text {
      position: relative;
      /* float: left; */
      /* （***）設(shè)置最大高度為兩行的高度 */
      max-height: 42px; 
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      /* 設(shè)置文本在按鈕下方 */
      z-index: 0; 
    }

    /* 按鈕前方省略號的樣式 */
    .pseudo-element {
      color: #000;
      margin-right: 5px;
    }

    /* 按鈕 */
    .expand-button {
      /* (***) 設(shè)置定位，使按鈕與最后一行平行并覆蓋在最后一行上方 */
      position: absolute;
      /* 設(shè)置按鈕浮動在右方 */
      /* float: right; */
      /* 默認(rèn)隱藏按鈕 */
      display: none;
      /* 將按鈕向上移動一行 */
      right: 0px;
      bottom: -3px;
      color: skyblue;
      /* 此處背景一定要設(shè)置， */
      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) => {
      // 創(chuàng)建一個新的偽元素
      const pseudoElement = document.createElement('span');
      pseudoElement.classList.add('pseudo-element');
      pseudoElement.textContent = content;

      // 將偽元素插入到目標(biāo)元素的前面
      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) => {
          // 輸出查看當(dāng)前高度是否超過兩行高度（根據(jù)當(dāng)前字體大小進(jìn)行適配）
          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屬性，實現(xiàn)展開效果
            const content = textContents[index];
            if (content.style.maxHeight !== 'none') {
               // 如果未展開，展開所有文本
              content.style.maxHeight = 'none';
              button.textContent = '收起'; // 改變按鈕文本
              addContentBefore(button, '');
            } else {
              // 如果已經(jīng)展開，恢復(fù)到兩行
              content.style.maxHeight = '42px'; // 恢復(fù)到兩行的高度
              button.textContent = '展開'; // 恢復(fù)按鈕文本
              addContentBefore(button, '...');
            }
          });
        });
      };

    getMoreText();
  </script>
</body>

</html>