单行文本溢出省略号
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%);
}