HTML CSS LI Wrapping

Question

У меня есть вертикальное меню в моей системе, которое в основном сделано из HTML ul/li с стилем CSS (см. Рисунок ниже). Однако я не хочу, чтобы элементы li были более широкими, чем меню для обертывания. Я бы предпочел, чтобы они переполнялись горизонтальной полосой прокрутки в нижней части меню. Как это сделать в CSS?

Answer 1

ul { 
    overflow: auto; // allow li's to overflow w/ scroll bar 
        // at the bottom of the menu 
} 

li { 
    white-space: nowrap; // stop the wrapping in the first place 
} 

Answer 2

Использование white-space:nowrap. Например:

li { 
    white-space:nowrap; 
} 

Вот documentation.

Answer 3

Вы также должны были бы дать стиле ЛУ:

ul{ 
width:250px; 
overflow:auto; 
}