Обнаружение переполнения пунктов меню не всегда рассчитывается правильно ⇐ CSS

[Anonymous]

Я пытаюсь вычислить, есть ли в горизонтальном меню место для всех элементов меню, а если нет, то помещаю переполненные элементы в раскрывающийся список.
Вот что у меня есть. Это работает - почти - потому что иногда рассчитывается неправильно. Попробуйте изменить размер окна — вы увидите что-то вроде этого:

Код: Выделить всё

const nav = document.querySelector(".navbar");
const contentBar = nav.querySelector(".navbar-nav");
const navItems = document.querySelectorAll(".navbar-nav > li:not(.grouped)");
const allItems = contentBar.querySelectorAll('li');
const dropdown = nav.querySelector(".grouped-content");
const more = nav.querySelector(".grouped");

const update = () => {
// Show all items for exact calculation
allItems.forEach((item) => {
item.classList.remove('d-none');
});

let avaliableWidth = nav.offsetWidth;
let stopWidth = more.offsetWidth;
let subitems = [];
dropdown.innerHTML = "";

navItems.forEach((item, i) => {
// Calculate if menu items are wider than navbar
if (avaliableWidth >  stopWidth + item.offsetWidth) {
stopWidth += item.offsetWidth;
} else {
// Not enough space
let li = document.createElement("li");
li.innerHTML = item.innerHTML;
// Append overflowing menu items to dropdown
dropdown.appendChild(li);
// Hide items that won't fit in menu
item.classList.add('d-none');
// Count items in dropdown
subitems.push(i);
}
})

// Hide "More" item if it has no children
if (!subitems.length) {
more.classList.add('d-none');
}
}

update();
window.addEventListener("resize", update);

Код: Выделить всё

.nav-link {
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
}

[*]

• Item 1
• Item 22
• Item 333
• Item 4444
• Item 5555555
• Item 66
• Item 7777777777777
• Item 8
• Item 999999
• Item 10101010
• Item 1111
• Item 12121212
• Item 131313131313
• Item 1414
• Item 15
• Item 16161616
• Item 1717
• Item 18181818181818
• Item 191919
• Item 20
• Item 212121
• Item 2222
• More

< /code>
< /div>
< /div>
< /p>
Что мне не хватает?
заранее. < / п>

Подробнее здесь: https://stackoverflow.com/questions/792 ... -correctly