如果子项的总和超过父宽度，则将类应用于子元素

Question

我正在尝试创建一个仅限于一行的响应式菜单。当屏幕宽度变小时，任何不完全适合行的菜单项都需要放入菜单中右侧固定的“更多”菜单项中。我通常只使用CSS媒体查询来执行此操作，但鉴于菜单项的数量是动态的，因此很难处理媒体查询。

我最初的想法是动态地为它们分配一个类，这样分配的类将显示无，当按下“更多”按钮时，它将显示隐藏的元素。

到目前为止，我已经走到了这一步：

      var parentWidth = $('nav').width();

      var childrenWidth=0;
        $('.menu-bar li').each( function(){ cWidth += $(this).width(); });

      while (childrenWidth > parentWidth) {               

            $($(".menu-bar li").get().reverse()).each(function() { 
                $(this).addClass('hidden-item');
             });                  
      };

这显然不起作用，任何帮助都会受到赞赏。

如果有人知道一个很好的CSS方式来做到这一点，我很乐意听到它，我一直绞尽脑汁想要弄明白。

由于