How can i avoid line break in an inline element?

Question

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  , but is there a different way to achieve this?

Answer 1

Have you tried styling the li with

white-space: nowrap

?

Answer 2

Hi, adding the following CSS will prevent the line from breaking:

li {
   white-space: nowrap;
}