一、概述：
html页面内容的收缩和展开效果, 默认显示两行内容，点击进看全文，显示全部。(效果如下图：)
二、源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>px / rem 默认显示两行内容 点击进看全文 显示全部</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
p{margin:0;}
a{text-decoration:none;}
.newlist{overflow:hidden;margin-bottom:10px;}
.newlist .item{width:260px;border:1px solid #e6e6e6;border-radius:5px;padding:5px;float:left;margin:0 10px 10px 0;}
.newlist .item .content{overflow:hidden;}
.newlist .item a.expand{color:#f60;font-size:12px;}
.newlist .item .content{height:48px;line-height:24px;font-size:12px;}/**px 2行即 2倍行高**/
.newlist.sp2 .item .content{height:3rem;line-height:1.5rem;font-size:0.7rem}/**rem 2行即 2倍行高***/
.newlist .item .content.auto,.newlist.sp2 .item .content.auto{height:auto;}
</style>
</head>
<body>
<h3>px 二行 显示 查看全文</h3>
<div class="newlist">
<div class="item">
<div class="content"><div class="txt">一身纯白的套状，面带微笑。每天早上，她走过公司的大门，人们都会投去羡慕的目光。</div></div>
<a href="javascript:;" class="expand">查看全文</a>
</div>
<div class="item">
<div class="content"><div class="txt">如果你问一个人，你活着是为了什么？有人会说快乐，有的人是幸福，有的人是成功……但肯定没有一个人会说自己活着是为了生气的。 没有谁喜欢有事儿没事儿生气玩儿的，但很多人却有事儿没事儿就生气。其实，不是生活中的不顺心太多，而是因为我们忘了自己活着是为了什么。</div></div>
<a href="javascript:;" class="expand">查看全文</a>
</div>
</div>
<h3>rem 二行 显示 查看全文</h3>
<div class="newlist sp2">
<div class="item">
<div class="content"><div class="txt">一身纯白的套状，面带微笑。每天早上，她走过公司的大门，人们都会投去羡慕的目光。</div></div>
<a href="javascript:;" class="expand">查看全文</a>
</div>
<div class="item">
<div class="content"><div class="txt">如果你问一个人，你活着是为了什么？有人会说快乐，有的人是幸福，有的人是成功……但肯定没有一个人会说自己活着是为了生气的。 没有谁喜欢有事儿没事儿生气玩儿的，但很多人却有事儿没事儿就生气。其实，不是生活中的不顺心太多，而是因为我们忘了自己活着是为了什么。</div></div>
<a href="javascript:;" class="expand">查看全文</a>
</div>
</div>
<script>
$(function(){
$(".newlist .item").each(function(){
var obj=$(this);
if(obj.find(".content").eq(0).height()<obj.find(".txt").eq(0).height()){
obj.find(".expand").eq(0).click(function(){
if($(this).text()=="查看全文"){
$(this).parent().find(".content").eq(0).addClass("auto");
$(this).html("收起全文");
}
else{
$(this).parent().find(".content").eq(0).removeClass("auto");
$(this).html("查看全文");
}
});
}
else{
$(this).find(".expand").eq(0).text("没有更多");
}
});
});
</script>
</body>
</html>
三、结语：
核心技巧：利用父级容器的固定 高度跟内容的总高度容器对比，然后再实现内容的收缩和展开效果。
以上是本人认为最简单的有效的方法，如果你有什么更好的方法欢迎前来探讨。（完）
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)