多行省略展开

<!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>
猜你喜欢
