css文本省略；多行文本折叠

1、单行文本省略：

CSS代码：

.report_con{
    width: 6rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

HTML代码：

<div class="report_con">
    工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容
</div>

效果展示：

 

2、多行文本省略：

CSS代码：

.news_info{
    width: 6.24rem; 
    font-size: .28rem;
    color: #333333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

HTML代码：

<div class="news_info">
    关于做好我省工程建设项目的通知做好我省工程省工程建设项目的通知做好我省工程 关于做好我省工程建设项目的通知做好我省工程省工程建设项目的通知做好我省工程 关于做好我省工程建设项目的通知做好我省工程省工程建设项目的通知做好我省工程 关于做好我省工程建设项目的通知做好我省工程省工程建设项目的通知做好我省工程 
</div>

效果展示：

3：多行文本折叠：

CSS代码：

.report_con {
    font-size: .28rem;
    color: rgb(102, 102, 102);
    margin-top: .2rem;

    overflow: hidden;
}

.show {
    line-height: .6rem;
    font-size: .26rem;
    color: rgba(102, 102, 102, .4);
    text-align: center;
    box-shadow: 0 .05rem .05rem -1px rgba(255, 255, 255, .8);
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .9));
    display: none;
}

HTML代码：

<div class="report_con">
    工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容工作报告内容
</div>
<div class="show">展开</div>

JQ代码：

var contNum = $(".report_con");
var slideHeight = 82; //px
for (var i = 0; i < contNum.length; i++) {
    let defHeight = $(contNum[i]).height();
	if (defHeight >= slideHeight) {
		$($('.show')[i]).show();
		fold($(contNum[i]), defHeight, i);
	}
}

function fold(obj, defHeight, index) {
    obj.css('height', slideHeight + 'px');
    $($('.show')[index]).click(function() {
	    var curHeight = obj.height();
	    if (curHeight == slideHeight) {
		    obj.animate({
		    	height: defHeight
		    }, "normal");
		    $($('.show')[index]).html('隐藏');
	    } else {
		    obj.animate({
		    	height: slideHeight
		    }, "normal");
		    $($('.show')[index]).html('展开');
	    }
	    return false;
    });
}

 效果展示：