Вам концепт нужен или что?
Могу предложит следующее.
Делаем строку не переносимой на новую строку (nowrap, flex, overflow)
Основной враппер с обрезкой (overflow)
Внутри контейнер с элементами (flex no wrap, white-space nowrap)
Таким образом мы сможем получить ширину враппера и ширину контейнера.
Если ширина внутреннего контейнера меньше враппера — ничего не делаем, всё помещается.
В противном случае проверяем ширину последнего элемента. Если она больше (wrapper_width - first_el_width), то последний слишком широкий. Тогда мы вырезаем все внутренние со второго по предпоследний. В последнем обрезаем длину (можно через css ellipsis).
Если последний элемент не такой широкий, то подсчитываем ширины средних элементов, начиная с предпоследнего до тех пор пока не станет больше или равной разнице ширин контейнера и враппера. Такое количество элементов вырезаем.
Ну и на месте вырезанных элементов можно размещать кнопку с троеточием, по клику на которую будет выпадать список в вырезанными элементами.
Простой
