Jak zapobiec łamaniu linii w elementach listy za pomocą CSS

513

Próbuję umieścić link o nazwie Prześlij CV w menu za pomocą litagu. Ze względu na spację między dwoma słowami zawija się w dwie linie. Jak zapobiec owijaniu za pomocą CSS?

html css word-wrap Rajasekar
źródło

Odpowiedzi:

969

Użyj white-space: nowrap;[1] [2] lub daj temu linkowi więcej miejsca, ustawiając liszerokość na większe wartości.

[1] § 3. Biała spacja i zawijanie: właściwość białych znaków - moduł tekstowy CSS poziomu 3 W3
[2] białych znaków - CSS: Kaskadowe arkusze stylów | MDN

n1313
źródło
41
Powinieneś odwoływać się do W3C zamiast do tej przerażającej i często niepoprawnej strony w3schools. w3.org/TR/css3-text/#white-space0
Sebastien Martin
53
Lub po prostu
odwołaj się do
4
Uniemożliwiłem łamanie linii w elementach li przy użyciu display: inline;. Być może pomoże to również innym z podobnymi problemami.
Ważne jest, aby zachować ostrożność przy wyświetlaniu: wbudowany, ponieważ może mieć skutki uboczne. biała przestrzeń: nowrap; ma tylko jeden efekt.
Crispen Smith,
W takim przypadku następuje przepełnienie tekstu. jak temu zapobiec?
147

Możesz dodać ten mały fragment kodu, aby dodać ładne „…” na końcu linii, jeśli zawartość jest zbyt duża, aby zmieściła się w jednym wierszu:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
JimmyRare
źródło
Szukałem rozwiązania
blokowania
33

Jeśli chcesz to osiągnąć selektywnie (tj. Tylko do tego konkretnego łącza), możesz użyć spacji niełamliwej zamiast zwykłej spacji:

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

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

edycja: Rozumiem, że jest to HTML, a nie CSS, zgodnie z żądaniem OP, ale niektórzy mogą uznać to za pomocne…

ptim
źródło
14

display: blok wbudowany; zapobiegnie przerwaniu między słowami w elemencie listy

 li {
    display: inline-block;
 }
Nadeesh Peiris
źródło
1
Jeśli przejdę do jsfiddle i wyreguluję szerokość wyniku, poszczególne pozycje listy zostaną podzielone między słowem „lista” a liczbą, co jest dokładnie tym, czego OP nie chce ...
GentlePurpleRain 24.01.18
4

Bootstrap 4 ma klasę o nazwie text-nowrap. Właśnie tego potrzebujesz.

Jewgienij Afanasiew
źródło
2
Wolałbym unikać polecania używania Bootstrap w 2019 roku.
Broda Noel
2
@BrodaNoel Dlaczego?
Jewgienij Afanasiew