html - 允许内容溢出，但不拉伸(stretch)视口(viewport)

Question

我正在处理一个会溢出的 header 。它应用了 white-space: nowrap 规则，以防止将文本分成两行或更多行。

问题是，视口(viewport)现在会拉伸(stretch)以适合文本，然后页面可以在 x 轴上滚动。应用 overflow-x: hidden 隐藏滚动条，但仍然可以通过鼠标中键拖动在移动设备和桌面设备上滚动页面。

我知道我可以使用 position: fixed，但这不是我的解决方案。我希望页眉保留在原处。

这是一个 fiddle到目前为止我的所有尝试。

Answer 1

好的，尝试应用这个:

CSS:

.wrapper {
    position: absolute;
    width: 98%;
    overflow: hidden;
}
.text {
    font-size: 500%;
    white-space: nowrap;
    display: block;
    width: 100%;
    float: left;
}

编辑:哦，并删除 overflow-x: hidden;来自 html,正文