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

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

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

赞 (0)

相关推荐

  • 小程序getLocation需要在app.json中声明permission字段

    小程序getLocation需要在app.json中声明permission字段,个别需要获取用户地理位置的在开发者工具调试时会出现getLocation需要在app.json中声明permission字段 提示,如下图: app.json里加上这个 说明: 获取用户位置信息时需填写用途说明 在一些小程序/小游戏的业务逻辑中,有时需要依赖用户所在的地理位置来提供服务,当前开发者可以通过调用 调用 wx.getLocation / wx.authorize 等接口获取用户的地理位置信息或授权. 根

  • JS根据json数组多个字段排序及json数组常用操作

    js 根据json数组多个字段排序的实现代码如下所示: /**数组根据数组对象中的某个属性值进行排序的方法 * 使用例子:newArray.sort(sortByArr(['number'],false)) //表示根据number属性降序排列;若第二个参数不传递,默认表示升序排序 * @param attr 排序的属性 ['name','sex'...],根据一个字段或者多个字段排序 * @param rev true表示升序排列,false降序排序 * */ function sortByA

  • Spark SQL操作JSON字段的小技巧

    前言 介绍Spark SQL的JSON支持,这是我们在Databricks中开发的一个功能,可以在Spark中更容易查询和创建JSON数据.随着网络和移动应用程序的普及,JSON已经成为Web服务API以及长期存储的常用的交换格式.使用现有的工具,用户通常会使用复杂的管道来在分析系统中读取和写入JSON数据集.在Apache Spark 1.1中发布Spark SQL的JSON支持,在Apache Spark 1.2中增强,极大地简化了使用JSON数据的端到端体验. 很多时候,比如用struct

  • Spring Boot 从静态json文件中读取数据所需字段

    •在实体中,通常使用类似字典表的文件来表示属性,文件大都配置在配置文件中,也可以是静态文件,本次记录如何从静态json文件中读取所需字段. 1.文件格式以及路径 2.加载文件 import org.springframework.beans.factory.annotation.Value; import org.springframework.core.io.Resource; @Value("classpath:static/data/area.json") private Res

  • 通过JS深度判断两个对象字段相同

    代码: /** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj){ return Object.prototype.toString.call(obj)==='[object Object]'; }; /** * 判断此类型是否是Array类型 * @param {Array} arr */ function isArray(arr){ return Object.prototype.toString.call(

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

    主要是使用-webkit-line-clamp这个属性进行限制显示行数,通过计算文字在标签内的显示高度来计算当前文字行数,再与需要限制的行数进行对比,来确定是否显示 代码如下: <!--Created by lmj on 2017/8/10.--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co

  • js实现div层缓慢收缩与展开的方法

    本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu

  • JavaScript控制网页层收起和展开效果的方法

    本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q

  • 带缓冲的 收缩与展开内容效果

    兼容ie5.5+   firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试) 看到blueidea很多朋友都发了一些 收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵. 最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢. 这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵. 放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!! 复制代码 代码如下: <html> <head>

  • JavaScript实现的伸展收缩型菜单代码

    JavaScript实现的伸展收缩型菜单代码

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 这是一款真正的JavaScript伸展收缩型菜单,鼠标放上看一看,是不是很酷?鼠标划出菜单项的时候,背景会伸长.菜单没有加链接,想用的自己加,再美化一下,绝对够个性吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zkss-menu-codes/ 具体代码如下: <html> <head> <title>真正的Java

  • Android仿QQ好友列表实现列表收缩与展开

    Android仿QQ好友列表实现列表收缩与展开

    ExpandableListView是一个垂直滚动显示两级列表项的视图,与ListView不同的是,它可以有两层:每一层都能够被独立的展开并显示其子项. 好友QQ列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到android的ExpandableListView,今天研究了一下这个的用法,也参考了很多资料动手写了一个小demo,实现了基本的功能,下面直接上效果图以及源代码

  • javascript使用substring实现的展开与收缩文字功能示例

    javascript使用substring实现的展开与收缩文字功能示例

    本文实例讲述了javascript使用substring实现的展开与收缩文字功能.分享给大家供大家参考,具体如下: 效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 展开和收缩</title> <style> p { margin: 0 auto; widt

  • jquery简单实现网页层的展开与收缩效果

    jquery简单实现网页层的展开与收缩效果

    本文实例讲述了jquery简单实现网页层的展开与收缩效果.分享给大家供大家参考.具体如下: 这里演示了jquery网页层展开.层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

  • Vue2(三)实现子菜单展开收缩，带动画效果实现方法

    Vue2(三)实现子菜单展开收缩，带动画效果实现方法

    以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感. 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单. 看下效果图: 点开效果: 其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭.加上css3的 transition: max-height .3s;来实现动画效果. 子菜单的样式: .tree-son-menu{ background-color: #FFF; .

  • 不唐突的JavaScript的七条准则整理收集第1/2页

    1.不要做任何假设 (JavaScript是一个不可靠的助手) 可能不唐突的JavaScript 的最重要的一个特性就是--你要停止任何假设: * 不要假设JavaScript是可用的,你最好认为它很有可能是不可用的,而不是直接依赖于它. * 在你经过测试确认一些方法和属性可以使用之前,不要假设浏览器支持它们. * 不要假设HTML代码如你想象的那样正确,每次都要进行检查,并且当其不可用的时候就什么也不要做. * 让JavaScript的功能独立于输入设备 * 要记住其他的脚本可能会影响你的Ja

随机推荐