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
