1、打开空白
npm install --save-dev babel-polyfill
在入口文件倒入import 'babel-polyfill'
webpack.config.js配置
module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
}
};
2、行数限制,溢出... 首先判断是不是ie浏览器 IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if(isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if(fIEVersion == 7) { return 7; } else if(fIEVersion == 8) { return 8; } else if(fIEVersion == 9) { return 9; } else if(fIEVersion == 10) { return 10; } else { return 6;//IE版本<=7 } } else if(isEdge) { return 'edge';//edge } else if(isIE11) { return 11; //IE11 }else{ return -1;//不是ie浏览器 } }
不是的话,比如5行,样式这样就可以了 .ellipsis5 { display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
是ie的话
for(var i=0;i<document.getElementsByClassName("height5").length;i++){ if(document.getElementsByClassName("height5")[i].clientHeight>100&&this.isIe!==-1){ console.log("isie"); var classList=document.getElementsByClassName("height5")[i].getAttribute("class"); classList=classList.concat(' p-after'); document.getElementsByClassName("height5")[i].setAttribute("class",classList); console.log(document.getElementsByClassName("height5")[i].getAttribute("class")); } }
给行数限制的p加class限制max-height
.height5 { max-height: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .p-after:after { content: "..."; position: absolute; display: block; width: 20px; height: 20px; bottom: 0; right: 12px; color: #333333; background-color: #fff; }
就可以了