如何阻止div的宽度减小？

Question

我在table内有一个HTML div。我希望div的宽度能够在没有任何内容被包裹且没有高度增加的情况下动态减少。相反，我只想要一个水平滚动条，而没有垂直滚动条。

Here is my JSFiddle demo（请不要介意凌乱的HTML - 它是使用ASP .NET MVC Razor生成的。）

你可以通过我的CSS看到我尝试在外部div上使用overflow-x: scroll，但它并没有完全解决问题。

请让我知道如何阻止div的内容调整大小。感谢。

编辑：table内div的内容是动态的，因此硬编码宽度在这里不起作用。

Answer 1

正如你所说，你不希望包装表的内容，所以你可以使用这样的东西：

#container table * {
    white-space: nowrap;
}

我认为您不需要overflow-x: scroll;可以使用overflow-x: auto;，只有在必要时才会出现溢出。

Answer 2

将其设置为阻止文本换行。

System.out.print("       \r" );
Thread.sleep(1000);

jsfiddle

Answer 3

尝试将此用于CSS：

#container {
    max-height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    max-width: 350px;
}

将350px更改为您想要的任何内容。 overflow-y: hidden;行删除垂直滚动条，max-width行设置元素宽度的上限。