转自:https://www.jianshu.com/p/8a8af56c25a8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
如果在css中加入
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多余的文本会被省略号... 所代替
但是js中并没有判断这个文本是否有多余的文本
下面可以使用 isEllipsis 函数来判断
function isEllipsis(dom) {
var checkDom = dom.cloneNode(), parent, flag;
checkDom.style.width = dom.offsetWidth + 'px';
checkDom.style.height = dom.offsetHeight + 'px';
checkDom.style.overflow = 'auto';
checkDom.style.position = 'absolute';
checkDom.style.zIndex = -1;
checkDom.style.opacity = 0;
checkDom.style.whiteSpace = "nowrap";
checkDom.innerHTML = dom.innerHTML; parent = dom.parentNode;
parent.appendChild(checkDom);
flag = checkDom.scrollWidth > checkDom.offsetWidth;
parent.removeChild(checkDom);
return flag;
};
使用方法,传入一个dom,返回true或false
如果为ture则有多余文本
更多精彩内容:各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等,尽在 天边资源网 。