HTML CSS LI Wrapping

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

Ответ 1

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

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

Ответ 2

Используйте white-space:nowrap. Например:

li {
  white-space:nowrap;
}

Здесь документация.

Ответ 3

Вам также нужно будет указать стиль ul:

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