.container
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.child
{
position: relative;
float: left;
height: 100%;
width: 95px;
background-color: #99CCFF;
margin-left: 5px;
}
I when the size of the browser window is smaller than will allow for all the children to fit without wrapping I would like there to be a scrollbar, not the default mechanism of the child elements wrapping.
I'm not in control of the number of child elements so I can not set a width on the container. How can I prevent the wrapping of the child elements?
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).
Use "overflow: hidden" to avoid floating elements from wrapping a container's text. Unfortunately, any content of the content 's text will wrap underneath it: ![
Solution with the CSS white-space property You can make the contents of HTML <p>, <div>, and <span> elements not to wrap by using some CSS. You need the white-space property. As we know, this property helps us to handle the spaces within the element.
To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value.
If you don't want wrapping, you should not use floats - they were created specifically for wrapping.
Use a parent container with overflow:auto
and white-space:nowrap
and children with display:inline
or inline-block
.
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