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

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

edit: Я понимаю, что это HTML, а не CSS по запросу OP, но некоторые из них могут оказаться полезными...

Ответ 4

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

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

 li{
    display: inline-block;
 }

Ответ 5

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