html - 溢出:隐藏在div中不起作用

This question already has answers here:

Why do “inline-block” elements in a “nowrap” div overflow?

                                    （4个答案）


                                2年前关闭。


我需要将元素显示为一行并在溢出时隐藏，但是如果屏幕的宽度太短，我当前的代码会中断该行。屏幕宽度较短时，如何使元素隐藏在溢出上？

https://jsfiddle.net/4szyqv20/5/

<html><body>
<div class="container">
    <div class="element">
    1000000
    </div>
    <div class="element">
    1000001
    </div>
        <div class="element">
    1000002
    </div>
        <div class="element">
    1000003
    </div>
        <div class="element">
    1000004
    </div>
        <div class="element">
    1000005
    </div>
        <div class="element">
    1000006
    </div>
        <div class="element">
    1000007
    </div>
</div>

</body></html>

CSS：

.container {
  display: block
  overflow: hidden;
}
.element {
  display: inline-block;
  border: solid black 1px;
}

最佳答案

如果容器的尺寸不固定，overflow: hidden不会执行任何操作。您还需要添加white-space: nowrap以防止文本换行。

您的CSS将如下所示：

.container {
    display: block
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}
.element {
    display: inline-block;
    border: solid black 1px;
}

Here is an updated fiddle.

关于html - 溢出:隐藏在div中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49396053/