通过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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JavaScript实现QQ列表展开收缩扩展功能，包括了JavaScript实现QQ列表展开收缩扩展功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码，供大家参考，具体内容如下 效果图： 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery简单实现网页层的展开与收缩效果，包括了jquery简单实现网页层的展开与收缩效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下： 这里演示了jquery网页层展开、层收缩代码，带缓冲动画效果，点击指定的文字或按钮，可展开指定层，再次单击会收起层，类似效果网上已见到许多，请根据自己的需要修改
-
本文向大家介绍jQuery实现DIV层收缩展开的方法，包括了jQuery实现DIV层收缩展开的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jquery程序设计有所帮助。
-
本文向大家介绍Android实现可收缩和扩展的TextView，包括了Android实现可收缩和扩展的TextView的使用技巧和注意事项，需要的朋友参考一下 在Android原生的TextView的基础上，可收缩/扩展的TextView：PhilExpandableTextView。 实现原理：核心是控制TextView的max lines。在TextView的初始化阶段但尚未绘制出View的时
-
本文向大家介绍C#实现listview Group收缩扩展的方法，包括了C#实现listview Group收缩扩展的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了C#实现listview Group收缩扩展的方法。分享给大家供大家参考，具体如下： 1、本实例是完善了codeprofect上面charju老师“Add Group Collapse Behavior on a List
-
1. 段落的前后必须是空行： 空行指的是行内什么都没有，或者只有空白符（空格或制表符） 相邻两行文本，如果中间没有空行 会显示在一行中（换行符被转换为空格） 2. 如果需要在段落内加入换行（<br>）： 可以在前一行的末尾加入至少两个空格 然后换行写其它的文字 3. Markdown 中的多数区块都需要在两个空行之间。