我有业务要求在屏幕崩溃时隐藏div。例如，我有一个工具栏加载divs，其中一些div是包含文本和图标的按钮。其他div按钮只有一个图标，没有文字。对于包含文本和图标的div /按钮，如果浏览器窗口变得比工具栏的宽度窄，我需要div按钮内的所有文本来隐藏/折叠，只留下图标。然后，如果浏览器窗口再次变大 - 足够大以容纳整个工具栏 - 我需要div按钮内的文本来展开/重新出现。
示例 - 原始工具栏：
----------------------------------------------------------------------------
[X] Button 1 [X] Button 2 [X] [X] Button 4
----------------------------------------------------------------------------
示例 - 折叠的工具栏：
--------------------------------
[X] [X] [X] [X]
--------------------------------
注意：[X]代表图像图标。
我可能想出一些jquery动态地完成这一切，但这似乎容易出错并且可能成为一个老鼠洞。有没有CSS方法呢？或许某个div（我的外部工具栏div或内部按钮div）意识到它没有空间，并在那时触发某种风格或类？
重要提示：我无法提前知道工具栏的宽度，它是动态的，取决于服务器事件和用户设置。因此，我不认为CSS媒体查询会解决这个问题。
我是否坚持使用jquery解决方案？