CSS nowrap for other than text elements?

Question

Is there a way to avoid wrapping of a div's content when the content is not just text e.g. several buttons?

Alitta

do you mean overflow: hidden? Please let as know what "wrapping" means – Oppress

"wrapping" means that white-space:nowrap; doesn't work for non-text, content gets wrapped (takes more than 1 line) – Alitta

Please show a case where white-space: nowrap does not work for buttons. Button elements are text content, in HTML and CSS terms. – Billion

If it doesn't work try to add display: inline-block to the elements that still wrap. It should follow the white-space: nowrap rule. I'm instead facing the problem of having it also to not overflow but resize the parent element. – Cartilage

Answer 1

white-space:nowrap; should do the trick.

#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

Windowpane

Demo doesn't work in my browser (Chrome 60.0.3112.113). I had to add "overflow:hidden" to "#foo". – Twink

Answer 2

You can set both these properties in CSS:

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

Aurore

Answer 3

You can declare static positions for the other contents using

position:absolute;

Channa