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