多行文本溢出省略号击展开收缩(整理)-阿里云开发者社区

多行文本溢出省略号击展开收缩(整理)

2023-09-16 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 多行文本溢出省略号击展开收缩(整理)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单个多行文本溢出省略号击展开收缩(整理)</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="content">
    世界上，每一个人都有个想要寻找的人，这个人，错过了，就再也找不回来。如果爱上，就不要轻易放过机会。莽撞，可能使你后悔一阵子；怯懦，却可能使你一辈子后悔！
</div>
<script>
 var str = $("#content").text();
 var tempt = str;
 coverup();
 function coverup() {
     if (str.length > 17) {
         $("#content").text(tempt.slice(0, 17) + "...");
     }
     var readmore = "<a οnclick='showmore()'  style='color: orange;'>查看更多↓</a>"
     $("#content").append(readmore);
 }
 function showmore() {
     $("#content").text(str);
     var readmore = "<a οnclick='coverup()'  style='color: orange;'>收起↑</a>"
     $("#content").append(readmore);
 }
</script>
</body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>循环多个多行文本溢出省略号击展开收缩(整理)</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script>
      var arrry = [{
          txt: '世界上，每一个人都有个想要寻找的人，这个人，错过了，就再也找不回来。如果爱上，就不要轻易放过机会。莽撞，可能使你后悔一阵子；怯懦，却可能使你一辈子后悔！',
        },
        {
          txt: '世界上，每一个人都有个想要寻找的人，这个人，错过了，就再也找不回来。如果爱上，就不要轻易放过机会。莽撞，可能使你后悔一阵子；怯懦，却可能使你一辈子后悔！',
        },
      ]
      var str = '';
      $.each(arrry, function(i, v) {
        str += '<div class="content content' + i + '" data-index=' + i + ' data-txt=' + v.txt + '>';
        if (v.txt.length > 17) {
          str += '<span>' + v.txt + '</span>' +
            '<a class="a' + i + '" style="color: orange;">查看更多11↓</a>';
        } else {
          str += '<span>' + v.txt.slice(0, 17) + '</span>' +
            '<a class="a' + i + '" style="color: orange;">收起↑</a>';
        }
        str += '</div>';
      });
      $('#main').html('');
      $('#main').html(str);
      $("#main").on('click', '.content', function() {
        var index = $(this).attr('data-index');
        var txt = $(this).attr('data-txt');
        var html = $(this).find(".a" + index).html();
        if (html == '查看更多11↓') {
          var tempt = $(this).find("span").html();
          $(this).find(".a" + index).prev("span").html(tempt.slice(0, 17) + "...");
          $(this).find(".a" + index).html('收起↑');
        } else {
          var tempt = $(this).find("span").html();
          $(this).find(".a" + index).prev("span").html(txt);
          $(this).find(".a" + index).html('查看更多11↓');
        }
      });
    </script>
  </body>
</html>

多行文本溢出省略号击展开收缩(整理)

热门文章

最新文章

相关电子书