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

Question

Я пытаюсь поместить ссылку под названием Отправить резюме в меню, используя li тег. Из-за пробела между двумя словами он переносится на две строки. Как предотвратить это перенос с помощью CSS?

Answer 1

Использование white-space: nowrap; ¹, или дайте этой ссылке больше места, установив liШирина для больших значений.

Answer 2

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

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

Answer 3

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

<li>submit&nbsp;resume</li>

http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling

редактировать: я понимаю, что это HTML, а не CSS, как требует OP, но некоторые могут найти это полезным...

Answer 4

дисплей: встроенный блок; предотвратит разрывы строк в элементах списка

http://jsfiddle.net/Nash171/mwe4s0nc/46/

 li{
    display: inline-block;
 }

Answer 5

Bootstrap 4 имеет класс с именем text-nowrap, Это именно то, что вам нужно.

Answer 6

В вашем CSS пробелы могут выполнять свою работу.

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

      white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal

Answer 7

<nobr>your text</nobr>(не css, но в некоторых случаях проще)