单行文本溢出省略号

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%);

}