隐藏宽度较大的 div 的水平离屏溢出答案

【问题标题】：Hide horizontal off-screen overflow of a div that has a large width隐藏宽度较大的 div 的水平离屏溢出
【发布时间】：2017-11-17 20:54:21
【问题描述】：

如何隐藏设置了较大宽度的<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 设备。

【问题讨论】：

你是说窗口滚动条？
正文 { 溢出-x：隐藏； }
有用的提示：你在overflow: hidden; 的正确轨道上，但这会将溢出设置为隐藏.example 容器内部的任何内容。您需要在 .example div 所在的容器上设置 overflow: hidden 属性。另外，如果您只想隐藏 horizontal 溢出，则需要使用 overflow-x ，如上所述。
在这里试试 ios stackoverflow.com/questions/3047337/…
谢谢各位。在我的特殊情况下（这与我在问题中写的有点不同），我用另一个 div 包裹了我的视频标签，其位置为：absolute、overflow-x：hidden 和 100% height/width

【解决方案1】：

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

body {
  overflow: hidden;
}

【讨论】：

这会设置 all 溢出以隐藏（x & y；水平和垂直）因此根本没有滚动条。如果 - 如 OP 中所述 - 您只需要隐藏水平溢出（和/或使用垂直滚动），请使用 overflow-x。

【解决方案2】：

你快到了！

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

您需要设置.example 的父容器的overflow，以使其工作 - 即它位于其中的任何容器。

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

为此，您需要设置

overflow-x: hidden

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

这可能是body，或另一个div 等HTH。

例如：

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

【讨论】：

【解决方案3】：

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

【讨论】：