jQuery多余文字折叠效果

CSS代码

.morecon{ 
    cursor:pointer;
    font-size:14px; float: left;
    margin: 5px 10px 0 0;
    color: #0096FF;
}
.checkmore .text{
    width: 100px;
    overflow: hidden;
}

HTML代码

<div class="checkmore">
    <div class="text">
        <p>我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
            我是爱德华，来自美国旧金山我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
        </p>
    </div>
</div>

JS代码

<script src="static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready( function() {
        $(".checkmore .text").each(function(){
            height=$(this).height();
            if(height>88) {
                $(this).css("height","88");
                $(this).after("<a class=\"morecon\" >查看更多</a>");
            }
        });
        $(".morecon").click(function(){
            $(this).parent().children(".text").css("height","auto");
            $(this).css("display","none");
        });
    });
</script>