Як запобігти розривам рядків у елементах списку за допомогою CSS


513

Я намагаюся помістити посилання під назвою Надіслати резюме в меню за допомогою liтегу. Через пробіл між двома словами він загортається до двох рядків. Як запобігти цьому обгортанню CSS?

Відповіді:


969

Використовуйте white-space: nowrap;[1] [2] або надайте цьому зв’язку більше місця, встановивши liширину на більші значення.


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


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;
}

Я шукав рішення із затисканням тексту, але буду дотримуватися цього рішення
— JorgeGarza

33

Якщо ви хочете домогтися цього вибірково (тобто лише до цього конкретного посилання), ви можете використовувати нерозривний простір замість звичайного простору:

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

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

редагувати: Я розумію, що це HTML, а не CSS, як вимагає ОП, але деякі можуть вважати це корисним ...


14

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

 li {
    display: inline-block;
 }

1
Якщо я натискаю на jsfiddle і регулюю ширину виводу, то окремі елементи списку розбиваються між словом "list" та числом, яке саме те, що OP не хоче ...
— GentlePurpleRain

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.