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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习 jQuery-fullPage.js 插件已经两天,参照网上的案例仿造了一个“魅族Note2官网”网页,中间...
    seporga阅读 11,531评论 2 11
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,914评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,238评论 0 2
  • “新媒体运营”!刚打开标题,就好像回到几个月前一样,这是我接触运营最早的一个分支,也正是由于这个分支使我开始下决心...
    张大侠丶阅读 1,495评论 0 0
  • 12月20日:从清晨的中央车站-第五大道-圣帕德里克大教堂-纽约现代艺术馆-韩国街吃韩餐-大都会艺术博物馆-洛特菲...
    Claire彤彤阅读 1,631评论 0 0