CSS menu auto width - links with multiple words line breaking

Here's a live demo for your convenience: http://jsfiddle.net/L开发者_C百科r6NQ/2/

On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so the <ul> isn't really wide for lists with short content.

How can I prevent the link from line breaking, without setting an explicit width. If the link is one word, I get the desired effect, but with multiple words, the <ul> is only as wide as the longest word.

ul#navigation li {
    white-space:nowrap; /* <-- ADDED */
    float:left;
    width:auto;
    padding:10px;
    margin-right:10px;
    position:relative;
}

If you want to shorten long lines add a <br /> in the anchor.

You can use non-breaking spaces. Instead of spaces in the link, use  .