Как динамически помещать переполненные элементы в раскрывающийся список ⇐ CSS

[Anonymous]

Постановка задачи
У меня есть простая динамическая панель навигации (количество элементов и текст можно изменить). Я хочу отобразить на экране первые X элементов, которые могут поместиться в одну строку, а также раскрывающийся список «Показать больше», куда будут помещены все переполненные элементы, то есть элементы, оставшиеся после размещения первых X элементов в строке.
Возможное решение
Я пытался добиться этого, вычисляя ширину каждого элемента (ширина текста + отступы кнопок), проверяя ширину экрана, а затем помещая только первые X элементов, общая ширина которых (плюс ширина кнопки «показать больше») меньше ширины экрана. Теперь самое сложное — вычислить ширину текста. Если мы сначала визуализируем все элементы, то будет легко получить отображаемую ширину каждого элемента, а затем мы сможем выполнить приведенное выше вычисление, чтобы проверить, какие элементы умещаются в одной строке. Однако этот подход изначально будет отображать все элементы и не является решением, оптимизированным для производительности.

Подробнее здесь: https://stackoverflow.com/questions/783 ... a-dropdown