解决多行文本溢出省略号显示问题：
1.只适用于适用于WebKit浏览器及移动端的方法
#id{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
不足：该方法不适用火狐360等等其他浏览器
2.跨浏览器兼容的方法
#id{
position:relative;
line-height:1.4em;
height:2.8em;
overflow:hidden;
width:130px;
}
#id::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding-left:20px;
background: -webkit-linear-gradient(left, transparent, #fff 62%);
background: -o-linear-gradient(right, transparent, #fff 62%);
background: -moz-linear-gradient(right, transparent, #fff 62%);
background: linear-gradient(to right, transparent, #fff 62%);
}
不足：css可在多行内容后面添加省略号，但文字未超出行的情况下也会出现省略号，需结合js判断内容是否结束====》js可判断内容是否全部显示完 查阅资料，
/**
* 多行文本溢出显示省略号
*/
/* function linHide() {
var oP = document.getElementsByClassName("payidtext");
var oText = oP[0].innerText;
console.log(oText);
for (var i = 0; i < oP.length; i++) {
var arr = oP[i].innerText.split(',');
if (oP[i].scrollHeight>oP[i].offsetHeight){
oP[i].innerText = arr.join(' ');
arr.pop();
}
oP[i].innerText+= '...';
console.log(oP[i].offsetHeight,oP[i].scrollHeight,arr);
}
}
但是内容在宽度自适应的table中不适用，因为缩小宽度时候，内容尾部不在可视高度范围内，被隐藏了....*/
3.js实现（采用）
123456,789,101112,131415,161718,192021,222324,252627,282930,313233,343536,373839
/**
* js实现多行文本溢出显示省略号
*/
function linHide() {
var con_arr = [];
var con;
$(".payidtext").each(function () {
con = $.trim($(this).text());//去掉内容前后文空格
con_arr.push(con);
console.log(con_arr)
});
for(var i=0;i if(con_arr[i].length>30){ //如果数组长度（也就是文本长度）大于等于30（数字可自定义） con=con_arr[i].substr(0,30)+'...';//添加省略号并放进payidtext文字内容后面 $(".payidtext").eq(i).text(con); }else{ con=con_arr[i]; $(".payidtext").eq(i).text(con) } } } 效果显示： 123456,789,101112,131415,16171... js可以实现显示的内容长度，方便控制