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

2024-05-06 16:52:48

字体：大中小

来源：转载

供稿：网友

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

代码如下:

<!--Created by lmj on 2017/8/10.--><!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>段落的收起与展开</title><script src="js/jquery.js"></script><style type="text/css">.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;}</style></head><body><div class="ui-tab"><P id="info-manager-content" class="info-shrink-text">测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落的展开与收起.测试段落</P><div class="more-text">查看更多</div></div><script type="text/javascript">var isHide = true;var textContainer;function initView() {textContainer = $("#info-manager-content");var single=document.createElement("div");// 设置文字样式single.style.cssText = "padding:0;visibility:hidden;font-familly:微软雅黑;font-size:12px";single.innerHTML = "单";document.body.appendChild(single);//获取该样式下的单个文字的高度var singleHeight = single.offsetHeight;document.body.removeChild(single);//获取整个段落的高度var paragraphHeight = textContainer.innerHeight();//设置你要限制的高度var limitHeight = 50;//当前文本行数var currentLine = (paragraphHeight/singleHeight).toFixed(0);//转化为行数var lineCount = (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;}});</script></body></html>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：ES6 Symbol数据类型的应用实例分析

下一篇：react koa rematch 如何打造一套服务端渲染架子