Question

I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul> in some container which width is changeable and with inlined <li> elements of fixed width. I should (and already found solution) put spaces between <li> elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li> items have fixed width.

I also should place some links above this described elements. For some reasons links must be in other <ul> element. They also wrapped in inlined <li> elems. And I want them to be positioned right above described <li> items. This can be done by setting fixed width of <li> items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.

So I want to trick browser: text will be overflowing <li> items.

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

But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.

The effect I wanted can be done by inserting   insted of spaces in text like this: <li><a href="#">Add&nbsp;to&nbsp;Favourites</a></li> .

So, my question is this: how in css-way make usual text NOT to break into several lines ?

Answer 1

.nobr  { white-space:nowrap; }