多行省略展开

最新推荐文章于 2024-09-10 10:26:11 发布

livezsw

最新推荐文章于 2024-09-10 10:26:11 发布

阅读量193

点赞数

分类专栏： css JavaScript 文章标签： js css

本文链接：https://blog.csdn.net/qq_41111677/article/details/108201706

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-style: normal;
      }
      .demo {
        position: relative;
        line-height: 20px;
        max-height: 60px;
        overflow: hidden;
        font-size: 14px;
        margin-bottom: 30px;
        text-align: justify;
      }
      .showMore {
        overflow: auto;
        max-height: none;
      }
      .demo .less {
        display: none;
        color: rgba(247, 182, 4, 0.801);
        cursor: pointer;
      }
      .demo .more {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        background: #fff;
        cursor: pointer;
        color: rgba(247, 182, 4, 0.801);
      }
      .demo .more i {
        color: #000;
        width: 1em;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="demoWrap">
      <div class="demo">
        这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长长长的文是一一段是一段很长这是一长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文
        <span class="less">收起</span>
        <span class="more"><i>...</i>展开</span>
      </div>
      <div class="demo">
        是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文
        <span class="less">收起</span>
        <span class="more"><i>...</i>展开</span>
      </div>
      <div class="demo">
        这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是sdsdddssdd,dsddsd,ddsd,ddsd,dsd,13344.23344一段很长的长的文是一段很长段很长的文是一段很长的文是一段很长的文这是一段很长的长的文是一段很段很长的文是一段很长的文是一段很长的文这是一段很长的长的文是一段很段很长的文是一段很长的文是一段很长的文这是一段很长的长的文是一段很段很长的文是一段很长的文是一段很长的文这是一段很长的长的文是一段很的文这是一段很长长的文是一段很长的文这是一段很长文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文这是一段很长的文本是一段是一段很长的文是一段很长的文是一段很长的文
        <span class="less">收起</span>
        <span class="more"><i>...</i>展开</span>
      </div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
      $(function () {
        $(".demo").each(function () {
          if ($(this)[0].scrollHeight > $(this).height()) {
            $(this).children(".more").show();
          }
        });

        $(".more").click(function () {
          $(this).parent(".demo").addClass("showMore");
          $(this).hide();
          $(this).siblings(".less").show();
        });

        $(".less").click(function () {
          $(this).parent(".demo").removeClass("showMore");
          $(this).hide();
          $(this).siblings(".more").show();
        });
      });
    </script>
    <!-- 注：当文本的第三行末尾有数字字母的时候，可能会出现"..."遮盖文本不全的情况 -->
  </body>
</html>