Menu
Is there a way to avoid wrapping of a div's content when the content is not just text e.g. several buttons?
676
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The overflowing word that is otherwise unbreakable is broken into chunks of text using overflow-wrap: anywhere so that it fits in its container. It's important to note that anywhere is not yet supported by some browsers. The image below shows the browser support according to caniuse.com.
nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.
Spaces in HTML With CSS In CSS, you can use either the margin or padding properties to add space around elements. Additionally, the text-indent property adds space to the front of the text, such as for indenting paragraphs.
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
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
