美文网首页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