js 判断文字折叠(样式包含text-overflow: ellipsis属性) 转

转自: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则有多余文本

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注