CSS way to limit line breaks for text

Question

I may have a slightly strange task, but I believe that there is no better solution. I need to have a <ul> in some kind of container whose width is mutable and with built-in <li> elements of fixed width. I have to (and already found a solution) put spaces between <li> elems of the same width. The width of the spaces changes dynamically and depends on the width of the parent container. Again, these <li> elements have a fixed width.

I should also post some links to the above elements. For some reason, the links must be in another <ul> element. They were also wrapped inline <li> elems. And I want them to be located above the described <li> elements. This can be done by setting the fixed width of the <li> elements as described above. Now the problem is that the text in each link has a different width and is split into two lines, but I have to put it on one line.

So, I want to trick the browser: the text will be full <li> .

 .liElem { width: 100px; height: 20px; overflow: visible; } 

But, as you can guess, the text is split into two lines and actually overflows the bottom of the list items, not the right one.

The effect that I wanted can be done by inserting   instested spaces in the text as follows: <li><a href="#">Add&nbsp;to&nbsp;Favourites</a></li> .

So my question is this: how to make plain text in a css path NOT broken into multiple lines?

Answer 1

 .nobr { white-space:nowrap; }