Question

如何隐藏设置了大宽度的<div>的水平，屏幕外溢出？例如：

HTML：

<div class="example">
</div>

CSS：

.example {
  height: 100px;
  width: 10000px;
  background-color: black;
  position: absolute;
  overflow: hidden;
}

Here is an example fiddle显示滚动条出现，我希望如果div非常大，就不会发生这种情况。

编辑：在父元素上添加隐藏的overflow-x不适用于小宽度的iOS设备。

Answer 1

您可以在元素容器上设置overflow: hidden。在这种情况下，它是身体。

body {
  overflow: hidden;
}

Answer 2

你快到了！

设置overflow类的.example仅隐藏内的任何溢出内容。

您需要设置overflow的父容器的.example，才能使其正常工作 - 即它所在的容器。

正如您在OP中提到的，您希望隐藏水平滚动条。

为此，您需要设置

overflow-x: hidden

但是（如上所述），请确保它位于.example的父容器中。

这可能是body，或其他div等HTH。

e.g：

body, .parent-container { overflow-x: hidden; }

Answer 3

您可以在CSS中使用overflow-x: hidden仅隐藏水平滚动。

隐藏宽度较大的div的水平屏幕外溢出

3 个答案: