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

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

5 415
html css word-wrap

5 ответов:

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

828

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

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

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

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

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

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

30

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

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

 li{
    display: inline-block;
 }
5

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

1