文本内容过多，需要做一个折叠展开的效果

目标效果图：

1.html

<div class="item-content">
                <span class="text">要不是几个月前参加马自达CX-4的周年庆典，我都意识不到马自达CX-4已经上市一年了，
                    也不知道这款车在时隔一年之后成为了一汽马自达的中流砥柱。想想真是时光荏苒岁月如梭，
                    就在一年前，我们还在为马自达‘‘好让人担心没米下锅”以及“总是叫好不叫座”担心，一年后就峰回路转了。
                    马自达只用一年就步入正轨完成品牌重塑，多少有些让人惊人要不是几个月前参加马自达CX-4的周年庆典，我都意识不到马自达CX-4已经上市一年了，
                    也不知道这款车在时隔一年之后成为了一汽马自达的中流砥柱。想想真是时光荏苒岁月如梭，
                    就在一年前，我们还在为马自达‘‘好让人担心没米下锅”以及“总是叫好不叫座”担心，一年后就峰回路转了。
                    马自达只用一年就步入正轨完成品牌重塑，多少有些让人惊人</span>
</div>

2.js

 $('.item-content .text').each(function () {
            var height = $(this).height();
            if(height>100){
                $(this).css('height',"100px");
                $(this).after("<span class='btn-info more'>展开</span>");
            }
        });
        $('.more').click(function () {
            var height = $(this).parent().children('.text').height();
            console.log(height);
            if(height>100){
                $(this).html("展开");
                $(this).parent().children('.text').css("height","100px");
            }else {
                $(this).html("折叠");
                $(this).parent().children('.text').css("height", "auto");
            }
        });
        

3.效果图

4.缺点

1. 展开按钮不能在文本结束的地方放置
2. 文本超过规定高度时候，添加。。。会换行。