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>