显示段落p中的前半部分内容剩下的用三个点代替，点击更多时显示所有内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="para para1" style="500px;margin:10px auto;">
    <p style="display:inline">
        抽象功能不够强，以及一些需要的功能还没实现。整个框架十分轻量级，产出的结果是一大堆引用文件和样板：
        而且应用的规模越大这一点就会越明显。抽象功能不够强，以及一些需要的功能还没实现。整个框架十分轻量级，
        产出的结果是一大堆引用文件和样板：而且应用的规模越大这一点就会越明显。
    </p><a href='javascript:void (0);'>更多</a>
</div>

</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var $text=$(".para p").html();
        var $text1=$text.substr(0,80)+"...";
        $(".para1 p").html($text1);
        $(".para1 a").html("更多");
        $(".para1 a").on("click",function(e){
            /*var e = e || event;*/
            $(e.currentTarget).parent().toggleClass("para1");
            $(".para p").html($text);
            $(".para a").html("收缩");
            $(".para1 p").html($text1);
            $(".para1 a").html("更多");
        })
    })
</script>
</html>

显示段落p中的前半部分内容 剩下的用三个点代替，点击更多时显示所有内容

显示段落p中的前半部分内容剩下的用三个点代替，点击更多时显示所有内容