html - 扩展 导致内容换行到下一行

Question

我的问题是 TD 中的内容将换行到下一行而不是扩展父表。我不明白 table 停止扩展的限制是什么。

我想要的是防止内容跳到下一行。此处描述了问题 https://jsfiddle.net/9o1cvbwk/3/ :

• 多次按“添加”。
• 表格不断向上扩展到屏幕宽度(确定)
• 再次按“添加”将使“V”链接跳到下一行，就在输入按钮 ( NOK ) 的正下方
• 再次按“添加”将导致表格扩展到屏幕的限制之外(N​​OK - 正确扩展但没有“v”链接滑动到下一行)

非常期待意见。

Answer 1

要防止“V”链接跳转到下一行，只需将 white-space: nowrap 添加到 td。

white-space 定义当浏览器遇到一些空白(空格、制表符等)时要做什么。如果我们将它设置为 nowrap，如果没有足够的空间，浏览器将不会包装我们的内容。

当表格超出边界时，“V”会折叠到下一行，因为没有空间。

在你的CSS中添加:

td {
  white-space: nowrap;
}

JSFiddle:https://jsfiddle.net/66c93hgv/