Автоматическая ширина меню CSS - ссылки с несколькими словами разрыва строки

Question

Вот живая демонстрация для вашего удобства: http://jsfiddle.net/Lr6NQ/2/

На ul#navigation ul, если есть явная ширина, ссылки появляются на их собственной "линии", как и предполагалось.Однако, поскольку ссылки имеют различную ширину, я бы предпочел оставить это значение "auto", чтобы <ul> не было действительно широким для списков с коротким содержимым.

Как можно предотвратить разрыв строки в ссылкебез указания явной ширины.Если ссылка состоит из одного слова, я получаю желаемый эффект, но с несколькими словами <ul> имеет ширину только самого длинного слова.

Answer 1

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

Если вы хотите сократить длинные строки, добавьте <br /> в привязку.

Answer 2

Вы можете использовать неразрывные пробелы. Вместо пробелов в ссылке используйте & nbsp;.