是否可以检测父元素内的内容是否太宽而无法容纳？

Question

我正在寻找响应性问题的潜在解决方案。

首先，我知道媒体查询在其中发挥了作用，我可以设置断点，甚至可以设置小断点。这是我已经在做的事情了。

但是，我想做的还不止于此。当整体宽度会导致子内容包裹在其父项中时，我想更改子 html 的样式，从而提供更动态的解决方案。

举个例子：

<nav class="parent" style="width:500">
    <ul class="inline-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li> // uh-ho, this won't fit - wrap it!
        <li>Item 5</li>
    </ul>
</nav>

它代表一个导航结构。当内容变得太大时，我想堆叠它。最简单的方法是使用 javascript 将一个类附加到父级 - 这将允许我堆叠而不是包装，并且比仅使用媒体查询可以实现的更优雅。

问题是如何检测联系人实际上是否比其父级更宽？

Answer 1

这是一个非常基本的 jQuery 解决方案。

var parent = $('.parent').width();
var child = $('.inline-list').width();

if(child > parent){

  // Adjust accordingly
  // Maybe add/remove/change .inline-list class with $('.inline-list').addClass('.stacked-list').removeClass('.inline-list');

}