慕容的工作随笔

慕容的工作随笔

记录学习和工作

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

评论 (0)

还没有评论,来做第一个吧。

发表评论

提交后需管理员审核通过后显示