文字溢出效果

一行不换行

.ex1{
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-size: 16px;
     line-height: 30px;
 
    }

多行

    .ex2{
        font-size: 16px;
        line-height: 30px;
        
   display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
    }

多行渐变效果

    .ex3{
        font-size: 16px;
        line-height: 30px;
        display: -webkit-box;
	    overflow: hidden;
        position: relative;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 3;
	/* autoprefixer: off */
	   -webkit-box-orient: vertical;
	/* autoprefixer: on */
    }
    .ex3::after{
        position: absolute;
		right: 0;
		bottom: 0;
		padding-left: 40px;
		background: linear-gradient(to right, transparent, #fff 50%);
		content: "...";
    }