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

Question

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

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

不过，我想做的还不止于此。当整体宽度会导致 child 内容包裹在其 parent 内时，我想更改 child 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 将 class 附加到 parent - 这将允许我堆叠而不是包装，并且比我仅使用媒体可以实现的更优雅查询。

问题是如何检测接触点实际上是否比其 parent 更宽？

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');

}

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

Is it possible to detect if content inside a parent element is too wide to fit?

javascript

html

css

responsive-design

media-queries