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


Posted in Javascript onJune 26, 2019

主要是使用-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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
javaScript Array api梳理
Mar 31 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 #Javascript
Vue实现日历小插件
Jun 26 #Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 #Javascript
Vue组件实现触底判断
Jun 26 #Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 #Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 #Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
详解Python中的日志模块logging
2015/06/19 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python模块的制作方法实例分析
2019/12/21 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
python字典进行运算原理及实例分享
2021/08/02 Python