多行展开
introduce-more-box是根据高度决定是否追加展开箭头的div
intro-more 这是阿里字体库的图标（可以忽略）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cor-introduce{
line-height: 24px;
color: #999;
position: relative;
overflow: hidden;
}
.introduce-more-box{
text-align: right;
}
.intro-more{
color: #999;
line-height: 24px;
}
</style>
</head>
<body>
<p class="cor-introduce">简介：多行展开。</p>
<div class="introduce-more-box"></div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//实际高度
var infoHeight = $(".cor-introduce").height();
// alert(infoHeight)
//默认高度
var defHeight = 72;
// 如果高度超出
if (infoHeight > defHeight) {
// 给p设置默认高度,隐藏超出部分
$('.cor-introduce').css('height', defHeight + 'px');
//加按钮
$(".introduce-more-box").append('<a href="javascript:;" class="iconfont intro-more"></a>');
// 点击按钮
$(".intro-more").click(function() {
var curHeight = $('.cor-introduce').height();
if (curHeight == defHeight) {
$(".cor-introduce").height("auto");
$(this).html('<a href="javascript:;" class="iconfont intro-more"></a>')
} else{
$('.cor-introduce').height(defHeight);
$(this).html('<a href="javascript:;" class="iconfont intro-more"></a>');
};
});
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。