CSS nowrap 用于文本元素以外的其他元素？答案

【问题标题】：CSS nowrap for other than text elements?CSS nowrap 用于文本元素以外的其他元素？
【发布时间】：2013-03-29 05:59:05
【问题描述】：

有没有办法避免包装 div's 当内容不仅仅是文本时的内容，例如几个按钮？

【问题讨论】：

你的意思是overflow: hidden？请告知“包装”是什么意思
"wrapping" 表示 white-space:nowrap;不适用于非文本，内容被包装（超过 1 行）
请展示white-space: nowrap 不适用于按钮的情况。 Button 元素是 HTML 和 CSS 术语中的文本内容。
如果它不起作用，请尝试将display: inline-block 添加到仍然换行的元素中。它应该遵循white-space: nowrap 规则。相反，我面临的问题是它也不会溢出但会调整父元素的大小。

【解决方案1】：

white-space:nowrap; 应该可以解决问题。

#foo {
  white-space:nowrap;
  width: 100px;
}

<div id="foo">
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
  <input type="button" value="hello"/>
</div>

Demo

【讨论】：

演示在我的浏览器（Chrome 60.0.3112.113）中不起作用。我不得不将“溢出：隐藏”添加到“#foo”。

【解决方案2】：

您可以使用

声明其他内容的静态位置

position:absolute;

【讨论】：

【解决方案3】：

您可以在 CSS 中设置这两个属性：

white-space:nowrap; 和 max-width:something;

【讨论】：