美文网首页javascript
js 如何判断 文字显示不全(text-overflow: el

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

作者: 在宇宙Debugger | 来源:发表于2017-01-06 14:58 被阅读901次

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

    相关文章

      网友评论

        本文标题:js 如何判断 文字显示不全(text-overflow: el

        本文链接:https://www.haomeiwen.com/subject/dytxbttx.html