原生js 实现el-menu 父级宽度不够显示省略号

html

<nav class="list " id="headerNavList">

        <div class="list_box noScrollbar" id="headerNav">

                <div class="item">111111</div>

                <div class="item">22222</div>

                <div class="item">33333</div>

        </div>

        <div class="dianBox hidden">

                <div class="dian">···</div>

                <div class="dianList" id="navDianList">

                        <div class="item">111111</div>

                        <div class="item">22222</div>

                        <div class="item">33333</div>

                </div>

        </div>

</nav>

js

function topNavShowMore() {

        var headerNavDom = document.getElementById('headerNav');

        var dianBoxDom =                 document.getElementById('headerNavList').getElementsByClassName('dianBox')[0];

        var headerNavDomChildren = headerNavDom.children;

        var navDianListChildren = document.getElementById('navDianList').children;

        let domInfo = headerNavDom.getBoundingClientRect()

        var domWidth = domInfo.width + domInfo.left;

        var hiddenIndex = -1;

        for (let index = 0; index < headerNavDomChildren.length; index++) {

                const item = headerNavDomChildren[index];

                let info = item.getBoundingClientRect();

                if ((info.left + info.width + 44) > domWidth) {

                        if (hiddenIndex === -1) {

                                hiddenIndex = index;

                        }

                        item.classList.add('opacity0');

                        navDianListChildren[index].classList.remove('hidden');

                } else {

                        item.classList.remove('opacity0');

                        navDianListChildren[index].classList.add('hidden');

                }

        }

        if (hiddenIndex != -1) {

                if (hiddenIndex === 0) {

                        dianBoxDom.style.left = '0px';

                } else {

                        const item = headerNavDomChildren[hiddenIndex];

                        let info = item.getBoundingClientRect();

                        dianBoxDom.style.left = (info.left - domInfo.left - 20) + 'px';

                }

                dianBoxDom.classList.remove('hidden');

        } else {

                dianBoxDom.classList.add('hidden');

        }

}