Предотвращение разрывов строк в элементах списка с помощью CSS

При добавлении гиперссылок на элементы списка с использованием тегов li пробелы между словами могут привести к тому, что ссылка будет перенос на несколько строк. CSS предлагает решения для решения этой проблемы.

Решение 1. Свойство White-Space

Свойство white-space позволяет контролировать обработку пробелов внутри элемента. . Установив white-space: nowrap; в теге li, вы можете предотвратить перенос ссылки:

li {
  white-space: nowrap;
}

Решение 2. Увеличение ширины элемента списка

Если вы не хотите удалять все пробелы, вы можете увеличить ширину тега li. Это дает ссылке больше места для размещения в одной строке:

li {
  width: 200px;
}

Оба решения эффективно предотвращают перенос ссылки, сохраняя при этом читабельность списка.