javascript

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

2017-01-06  本文已影响901人  在宇宙Debugger

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

上一篇下一篇

猜你喜欢

热点阅读