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

513

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

html css word-wrap Rajasekar
источник

Ответы:

969

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

[1] § 3. Пробел и перенос: свойство пробела - W3 CSS Text Module 3-го уровня
[2] пробел - CSS: каскадные таблицы стилей | MDN

n1313
источник
41
Вы должны ссылаться на W3C вместо этого страшного и часто некорректного веб-сайта w3schools. w3.org/TR/css3-text/#white-space0
Себастьян Мартин,
53
Или просто
обратитесь
4
Я предотвратил разрыв строки при использовании элементов li display: inline;. Может быть, это также поможет другим с подобными проблемами.
Важно быть осторожным с дисплеем: встроенным, поскольку он может иметь побочные эффекты. пустое пространство: nowrap; имеет только один эффект.
Криспен Смит
В этом случае происходит переполнение текста. как это предотвратить?
147

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

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
JimmyRare
источник
Я искал решение для ограничения текста, но я буду придерживаться этого решения
JorgeGarza
33

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

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

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

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

ptim
источник
14

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

 li {
    display: inline-block;
 }
Надеше Пейрис
источник
1
Если я щелкну на jsfiddle и отрегулирую ширину вывода, отдельные элементы списка будут разделены между словом «список» и числом, что именно то, что ОП не хочет ...
GentlePurpleRain
4

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

Евгений Афанасьев
источник
2
Я бы предпочел не рекомендовать использовать Bootstrap в 2019 году.
Broda Noel
2
@BrodaNoel Почему?
Евгений Афанасьев