JS实现段落的收缩与展开

Posted 狂奔的胖切肯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现段落的收缩与展开相关的知识,希望对你有一定的参考价值。

JS实现段落的收缩与展开

       主要是使用-webkit-line-clamp这个属性进行限制显示行数,通过计算文字在标签内的显示高度来计算当前文字行数,再与需要限制的行数进行对比,来确定是否显示

   代码如下:

 

  1  <!--Created by lmj on 2017/8/10.-->
  2 
  3 <!DOCTYPE html>
  4 <html>
  5 <head>
  6     <meta charset="utf-8">
  7     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  8     <title>段落的收起与展开</title>
  9     <script src="js/jquery.js"></script>
 10     <style type="text/css">
 11         .info-shrink-text {
 12             display: -webkit-box;
 13             overflow: hidden;
 14             text-overflow: ellipsis;
 15             -webkit-box-orient: vertical;
 16         }
 17 
 18         #info-manager-content {
 19             text-indent: 2em;
 20             font-size: 12px;
 21             color: #404040;
 22             font-family: 微软雅黑;
 23         }
 24 
 25         .more-text {
 26             display: -webkit-box;
 27             width: 100%;
 28             -webkit-box-sizing: border-box;
 29             -webkit-box-pack: end;
 30             padding-right: 10px;
 31             color: #00a5e0;
 32             font-size: 14px;
 33         }
 34     </style>
 35 </head>
 36 <body>
 37 <div class="ui-tab">
 38     <P id="info-manager-content" class="info-shrink-text">
 39         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 40         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 41         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 42         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 43         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 44         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 45         测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
 46         测试段落的展开与收起.测试段落</P>
 47     <div class="more-text">查看更多</div>
 48 </div>
 49 
 50 <script type="text/javascript">
 51     var isHide = true;
 52     var textContainer;
 53     function initView() {
 54         textContainer = $("#info-manager-content");
 55         var single=document.createElement("div");
 56         // 设置文字样式
 57         single.style.cssText = "padding:0;visibility:hidden;font-familly:微软雅黑;font-size:12px";
 58         single.innerHTML = "";
 59         document.body.appendChild(single);
 60         //获取该样式下的单个文字的高度
 61         var singleHeight = single.offsetHeight;
 62         document.body.removeChild(single);
 63         //获取整个段落的高度
 64         var paragraphHeight = textContainer.innerHeight();
 65         //设置你要限制的高度
 66         var limitHeight = 50;
 67         //当前文本行数
 68         var currentLine = (paragraphHeight/singleHeight).toFixed(0);
 69         //转化为行数
 70         var lineCount = (limitHeight / singleHeight).toFixed(0);
 71 //        alert(singleHeight+"----"+paragraphHeight+"---"+lineCount+"---"+currentLine);
 72 //        修改段落限制行数
 73         textContainer.attr("style", "-webkit-line-clamp:" + lineCount);
 74 //        设置按钮的显示或隐藏
 75         if (currentLine >= lineCount) {
 76             $(".more-text").show();
 77             isHide = true;
 78         } else {
 79             $(".more-text").hide();
 80         }
 81     }
 82     initView();
 83 
 84     window.onresize = function () {
 85         initView();
 86     };
 87     //添加点击事件
 88     $(".more-text").on("click", function () {
 89         if (isHide) {
 90             textContainer.removeClass("info-shrink-text");
 91             $(this).text("收起");
 92             isHide = false;
 93         } else {
 94             textContainer.addClass("info-shrink-text");
 95             $(this).text("查看更多");
 96             isHide = true;
 97         }
 98 
 99     });
100 </script>
101 </body>
102 </html>

 

 原文地址:https://blog.csdn.net/carryworld/article/details/77258685 


以上是关于JS实现段落的收缩与展开的主要内容,如果未能解决你的问题,请参考以下文章

ASP中关于TreeView控件的问题,怎样展开、收缩所有子节点?

Axure中继器实现子表的展开和收缩(载入时展开子表)

jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V1.0

小程序文本的展开收缩功能

原生js实现多行文字展开收缩

Android 实现视图文本TextView的展开与收缩功能