好资源导航 » 文章资讯 » 通过javascript实现段落的收缩与展开

通过javascript实现段落的收缩与展开

2023-08-20 22:51:04 62

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

代码如下:







段落的收起与展开


.info-shrink-text{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
}
#info-manager-content{
text-indent:2em;
font-size:12px;
color:#404040;
font-family:微软雅黑;
}
.more-text{
display:-webkit-box;
width:100%;
-webkit-box-sizing:border-box;
-webkit-box-pack:end;
padding-right:10px;
color:#00a5e0;
font-size:14px;
}





测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.
测试段落的展开与收起.测试段落
查看更多

varisHide=true; vartextContainer; functioninitView(){ textContainer=$("#info-manager-content"); varsingle=document.createElement("div"); //设置文字样式 single.style.cssText="padding:0;visibility:hidden;font-familly:微软雅黑;font-size:12px"; single.innerHTML="单"; document.body.appendChild(single); //获取该样式下的单个文字的高度 varsingleHeight=single.offsetHeight; document.body.removeChild(single); //获取整个段落的高度 varparagraphHeight=textContainer.innerHeight(); //设置你要限制的高度 varlimitHeight=50; //当前文本行数 varcurrentLine=(paragraphHeight/singleHeight).toFixed(0); //转化为行数 varlineCount=(limitHeight/singleHeight).toFixed(0); //alert(singleHeight+"----"+paragraphHeight+"---"+lineCount+"---"+currentLine); //修改段落限制行数 textContainer.attr("style","-webkit-line-clamp:"+lineCount); //设置按钮的显示或隐藏 if(currentLine>=lineCount){ $(".more-text").show(); isHide=true; }else{ $(".more-text").hide(); } } initView(); window.onresize=function(){ initView(); }; //添加点击事件 $(".more-text").on("click",function(){ if(isHide){ textContainer.removeClass("info-shrink-text"); $(this).text("收起"); isHide=false; }else{ textContainer.addClass("info-shrink-text"); $(this).text("查看更多"); isHide=true; } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

通过javascript实现段落的收缩与展开

热门推荐

随机推荐