Question

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

<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;
}

Answer 1

在.container上，您要添加white-space: nowrap;

Answer 2

如果容器没有固定大小，

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.

溢出：隐藏在div中不起作用

2 个答案: