通过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使用的14个方面
Sep 01 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
java解析json方法总结
2019/05/16 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python 实现随机数详解及实例代码
2017/04/15 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
大门门卫岗位职责
2013/11/30 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
上班早退检讨书
2014/01/09 职场文书
社区工作者先进事迹
2014/01/18 职场文书
租车协议书范本
2014/04/22 职场文书
预备党员转正材料
2014/12/19 职场文书
护理心得体会范文
2016/01/22 职场文书
Mysql开启外网访问
2022/05/15 MySQL