Как спрятать середину хлебных крошек при уменьшении ширины блока?

Question

[Илья Морунов]

Добрый вечер!

Необходимо поведение как в проводнике windows. А именно, если адрес к папке длинный при изменении ширины приоритет у первой и последней папке.

https://gyazo.com/7ca4a34814c1a9154bd67ddec0082d43 - помещаются все элементы
https://gyazo.com/4ef181513ee38b4bdfe7cb5a1379ee6d - два последних

Я хотел сделать так - спозиционировать последний элемент хлебных крошек так, чтобы при длинной цепочке падали первые элементы вниз (но последний не должен занимать всегда правый край контейнера), а контейнеру задать overflow:hidden; Но как бы я не старался, падает всегда последний.

https://jsfiddle.net/d1ob7m2e/1/ - пример на флексах, падает последний элемент

Хотелось бы решить задачу без JS, может быть в ваших светлых головах найдется идея для решения данной задачи? :)

Comments

[Андрей]

дак вам надо чтоб вылетали все кроме первого и последнего или все кроме последнего и предпоследнего?

[Александр]

Здесь или прятать хлебные крошки вообще, или оставлять с переносом после разделителя.
А вот, если крошка имеет длинное имя, тогда ее обрываешь многоточием или бьешь по слогам с помощью ­

[Илья Морунов]

Андрей, И тот, и тот вариант рассматриваю :)

[Илья Морунов]

Александр, За перенос слога отдельное спасибо!