Можно ли как-то реализовать следующее:
Есть меню состоящее из inline-block, вида:
-пункт 1- -пункт 2- -пункт 3- -выпадающее меню-
При смене разрешений, с помощью media query переопределяются правила, которые уменьшают ширину страницы и следовательно часть пунктов при меньших разрешениях не уместится в меню.
К сожалению, пункты могут быть совершенно произвольной длины, поэтому опираться на их размер нельзя и нужна универсальность.
Можно ли сделать как-то так, чтобы inline-block пункт меню скрывался полностью, если получалось так, что его часть оказывалась за пределами родительского блока (скрыта overflow hidden).
То есть чтобы скрытие элемента было не таким (обрезана часть третьего пункта):
-пункт 1- -пункт 2- -пунк
А таким (если часть не умещается, скрывается целиком):
-пункт 1- -пункт 2-
Хотелось бы это как-то реализовать без JS и у меня ощущение, что это можно сделать, но реализация сидит где-то глубоко в сознании и вспомнить как именно я не могу и начинаю думать уже, что что-то путаю или ошибаюсь.
Подскажите, если не сложно, есть пути реализации этого?
Пример с обрезанным пунктом горизонтального меню:
https://jsfiddle.net/ctpore0k/2/ 
Простой
