美文网首页
溢出显示tooltip

溢出显示tooltip

作者: hwj6820 | 来源:发表于2019-07-27 15:27 被阅读0次

    在项目中我们通过tooltip来处理溢出显示省略号,划过进行展示。一般会选用Element UI中tooltip组件。在此基础上实现溢出才显示tooltip需求。

    var checkName = document.getElementsByClassName('check_name')

    for (var i =0; i < checkName.length; i++) {

        if (checkName[i].clientWidth < checkName[i].scrollWidth) {

            this.check_name.push(checkName[i].innerText)

        }

    }

    获取到此元素,循环遍历,当元素的clientWidth 小于scrollWidth时,会出现省略号,将此元素的文字放在一个数组中,判断当前数组中有没有溢出元素的文字来显示tootip check_name.indexOf(label.name)

    单行的省略号通过clientWidth 及scrollWidth来判断

    多行的省略号通过clientHeight及scrollHeight来判断

    相关文章

      网友评论

          本文标题:溢出显示tooltip

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