js 如何判断 文字显示不全(text-overflow: ellipsis;)

2023年5月25日 653次阅读 来源: 可恶名字竟然被占用了啊

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

    原文作者：可恶名字竟然被占用了啊
    原文地址: https://www.jianshu.com/p/8a8af56c25a8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞