除文本元素外，如何在CSS中使用nowrap？

Question

有没有一种方法可以避免 div 的内容换行，即当内容不仅仅是文本时（例如多个按钮）？

- cur4so

---

你是指 overflow: hidden 吗？请告诉我们 "wrapping" 是什么意思。 - benams

“wrapping” 的意思是 white-space:nowrap; 对于非文本无效，内容会被换行（占用多行）。 - cur4so

请展示一个white-space: nowrap在按钮上无法正常工作的情况。在HTML和CSS术语中，Button元素是文本内容。 - Jukka K. Korpela

如果它不起作用，请尝试将display: inline-block添加到仍然换行的元素中。它应该遵循white-space: nowrap规则。我面临的问题是它不仅不能溢出，还要调整父元素的大小。 - Kamafeather

Answer 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>

演示

- sachleen

---

演示在我的浏览器（Chrome 60.0.3112.113）中无法正常工作。我不得不将“#foo”添加“overflow:hidden”。 - Sven

Answer 2

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

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

- Muhammad Omar ElShourbagy

Answer 3

您可以使用静态位置声明其他内容

position:absolute;

- LoBS