prevent <li> from breaking across lines
css, html
Solution
#ul-container{
white-space: nowrap;
}
`white-space: nowrap` will prevent the children (the li's) from going to a new line.
Live demo here (click).
Problem
I have a UL, inside a div where I have set the width of, DIV, UL and LI. I want overflow to scroll if there is any, so I set overflow to auto. However, I can't seem to prevent the LI from breaking across lines when it is too wide. Here is the css I am using: ``` /* id of the containing div */ #ul-container { width: 325px; border-style: solid; border-width: 1px; border-radius: 4px; border-color: #4297d7; overflow: auto; } /* this is the id if the ul*/ #selectable { width: 300px; height: 75px; } #selectable .ui-selecting { background: #ccc; } #selectable .ui-selected { background: #4297d7; } li { list-style: none; overflow: auto; width: 300px; margin-left: -25px; } ``` The overflow property in the li doesn't seem to do anything. When I put it on the div, I get the horizontal scroll whether I need it or not. Any help would be greatly appreciated.