文本内容超出父元素一行或多行省略号代替

单行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 

多行文本溢出：

第一种：

.news_list li .news_text p{

    line-height: 25px;
    max-height: 50px;/*  行高与显示行数的乘积  */

/*火狐不出现省略号，而是隐藏*/

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

}

多行文本溢出省略号

.news_list li .news_text p{

/*要想兼容火狐，IE，除了一下兼容代码外，要设置行高和最大高*/

position: relative;
    line-height: 25px;
    max-height: 50px;

/*不兼容火狐，IE*/

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

}

/*兼容火狐,ie9及以上*/
.news_list li .news_text p::after {
    /*content: "...";*/
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}


/*兼容ie8*/
.news_list li .news_text p:after {
    /*content: "...";*/
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}