【问题标题】: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 规则。相反,我面临的问题是它也不会溢出但会调整父元素的大小。

标签: css html 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;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-20
      • 2010-09-19
      • 1970-01-01
      • 2023-03-19
      相关资源
      最近更新 更多