Menu
I am building a menu with horizontal main entries. Below each the corresponding submenu titles are displayed vertically. Now, some longer menu titles are wrapped over several lines. Actually, the "sub" UL is just as wide as the longest single word in a submenu and all others are wrapped accordingly. I have given no width for the UL nor the LI (neither main nor sub menu).
So my question is, how can I avoid breaking lines? Probably I could substitute each space with (no-space character), but is there a different way to achieve this?
982
Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.
There are several ways to prevent line breaks in content. Using is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all 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).
Have you tried styling the li with
white-space: nowrap ?
128
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
