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

Вы можете добавить этот небольшой фрагмент кода, чтобы добавить красивую "…" в конце строки, если содержимое слишком велико, чтобы поместиться в одну строку:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

Этот код устанавливает скрытие переполнения, добавляет многоточие для длинного текста и запрещает перенос строк, что делает ваш список более аккуратным.

Если вы хотите добиться этого выборочно (то есть только для этой конкретной ссылки), вы можете использовать неразрывный пробел вместо обычного пробела:

<li>отправить&nbsp;резюме</li>

Подробнее о неразрывных пробелах можно узнать в этой статье на Википедии.

редактирование: я понимаю, что это HTML, а не CSS, как было запрошено автором вопроса, но некоторым это может оказаться полезным…

Вопрос, который вы задали, связан с использованием свойства CSS display: inline-block; для элементов списка. Применение этого значения к элементам <li> в вашем случае действительно влияет на отображение списка.

Когда вы устанавливаете display: inline-block;, элементы списка будут отображаться на одной строке, если для них достаточно места. Это предотвратит перенос между словами, поскольку inline-block элементы могут занимать ширину, определяемую их содержимым, и не будут переноситься на новую строку, пока не достигнут предельной ширины родительского элемента.

Вот пример кода, который иллюстрирует это:

li {
  display: inline-block;
}

Таким образом, если у вас есть несколько элементов списка, они будут располагаться в одну линию, и переноса между словами не произойдет, пока на экране достаточно места для их отображения. Если вам нужно, чтобы элементы списка имели отступы, вы также можете добавить margin к элементам <li>, чтобы создать расстояние между ними.

Если вам нужно управлять переносом слов в других ситуациях, стоит обратить внимание на свойства, такие как white-space или overflow, в зависимости от вашего конкретного случая использования.

Bootstrap 4 имеет класс text-nowrap, который как раз то, что вам нужно. Этот класс предотвращает перенос текста на новую строку, что может быть полезно в случаях, когда вы хотите, чтобы текст оставался в одной линии. Просто добавьте этот класс к вашему элементу, и текст не будет обрезаться, а вместо этого будет продолжаться на одну линию.

В вашем CSS свойство white-space может решить вашу задачу.

Возможные значения:

white-space: nowrap;   /* Не позволяет переносить текст на новую строку */
white-space: pre;      /* Сохраняет пробелы и переносы строк как есть */
white-space: pre-wrap; /* Сохраняет пробелы и переносы, но позволяет переносить строки */
white-space: pre-line; /* Сохраняет переносы строк, но игнорирует лишние пробелы */
white-space: break-spaces; /* Позволяет переносить строки и сохраняет пробелы */
white-space: normal;   /* Стандартное поведение: пробелы игнорируются, текст переносится */

Выберите нужное значение в зависимости от ваших требований к стилю текста.