Text wrapping in IE 7 <li> tags

Question

I have a horizontal menu bar made up of <li> tags, containing links, so a menu item looks something like:

<li>
 <a href="...link...">
  <span>Some text</span>
 </a>
</li>

Looks fine, until the menu bar is wider than the screen. When this happens, and the last menu item has one or more words, the second word of this item wraps just underneath the bar. If the screen is made even smaller, then it works fine, as the whole <li> just gets wrapped to the line below.

The <li> tags have a few CSS styles applied to them:

display:block;
padding:5px;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;

I can get my desired behaviour of the whole <li> wrapping to the line below if I explicitly set a width on the <li> item. However, I don't want to do this, as they are all different sizes by design.

Any ideas?

Answer 1

Add white-space:nowrap;

li > a > span
{
    white-space:nowrap;
}

This should keep item texts on one line.

Answer 2

Use

li span {
    white-space: nowrap;
}

rather than the child selector ( li > a > span ), since the child selector is not supportet by all browsers yet.