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

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

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

然而，我想做的只是稍微超出这个范围。当总宽度将导致子内容包装在其父内容内时，我想改变子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>

项目1
项目2
项目3
第4项
//嗯，这不合适-包起来！
项目5

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

---

问题是，如何才能检测出接触面是否比其父母更宽

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

var parent=$（'.parent'）.width（）；
var child=$（'.inline list'）.width（）；
如果（子项>父项）{
//相应调整
//可以使用$（'.inline list'）.addClass（'.stacked list'）.removeClass（'.inline list'））添加/删除/更改.inline list类；
}

既然你想使用Javascript，那就测量一下宽度吧？你能不能不使用JS/JQ来获取父级和子级的宽度并进行比较？再详细一点就好了——我不是JS专家。理想情况下，我会使用jquery。Fair point；）添加了一个基本的例子。哇，我从来没有意识到它会这么简单-谢谢你的帮助，约翰。大家好，JS:）很高兴它有帮助。