javascript - 请求有关溢出 : hidden 的更多信息

Question

我正在创建一个 HTML/CSS 应用程序，但我有点卡住了。假设我有 2 个元素彼此相邻 display: inline-block

每个元素都有一对彼此相邻的元素。请参阅以下试图解释它的插图:

因此，下图描述了 3 个不同级别的元素:

• 第 1 级:红色 - 外部元素
• 第 2 级:黄色 - 包装元素
• 3 级:绿色 - 内容

在 HTML 中，可以这样写:

<ul id="holder">
    <li>
        <div>
            <div class="col">Col 1</div>
            <div class="col">Col 2</div>
        </div>
    </li>
    <li>
        <div class="col">Col 1</div>
        <div class="col">Col 2</div>
    </li>
</ul>

UL代表红色元素，LI代表黄色元素，DIV元素代表绿色元素。

现在，假设我们的红色元素具有固定宽度，我将溢出设置为隐藏。这意味着当我调整页面大小时，右侧的元素会因为不适合页面而消失。

但问题来了，当我调整窗口大小时，窗口变得太小而无法呈现所有内容，立即，最新的 LI 元素在屏幕上不再可见。

有没有什么 CSS 方法可以确保没有隐藏 LI 元素，而是隐藏 LI 中的 DIV 元素？当两个 DIV 元素都被隐藏时，当然 LI 元素也可以被隐藏，因为它是空的？

如果没有 CSS 方法来做到这一点，有人介意使用 JavaScript 或其他东西让我朝着正确的方向前进吗？

这是一个 jsFiddle多解释一下。

亲切的问候

Answer 1

li 从 View 中消失了，因为它在 display: inline-block 中。一旦窗口不够宽，它就会移动到第一个 li 的下方。如果您释放 #holder 的高度 (height:auto)，您会看到这种情况发生。解决方案是添加 white-space : nowrap 以强制 li 保持在一行中。

更新的 fiddle : https://jsfiddle.net/zLqfe4z8/4/