Jak mogę uniknąć podziału wiersza w elemencie wstawianym?

Question

Buduję menu z poziomymi wpisami głównymi. Poniżej każdego z odpowiednich tytułów podmenu wyświetlane są pionowo. Teraz niektóre dłuższe tytuły menu są zawijane na kilka linii. W rzeczywistości, "sub" UL jest tak szeroki jak najdłuższe pojedyncze słowo w podmenu, a wszystkie inne są odpowiednio zawijane. Nie podałem żadnej szerokości dla UL ani LI (ani głównego, ani podmenu).

Moje pytanie brzmi: jak mogę uniknąć łamania linii? Prawdopodobnie mógłbym zastąpić każdą przestrzeń znakiem   (bez znaku spacji), ale czy istnieje inny sposób, aby to osiągnąć?

Answer 1

Czy próbowałeś stylizacji LI z

white-space: nowrap 

?

Answer 2

dodając następującą CSS zapobiega pękaniu linię:

li { 
    white-space: nowrap; 
} 

Answer 3

Jest to narzędzie klasy css text-nowrap. Można go znaleźć w sekcji użyteczności sekcji docs.

<div style="width: 10px"> 
    <span class="text-nowrap">This line will not break, ever....!!!</span> 
</div> 

Answer 4

nawiązaniu do odpowiedzi mK, tym bootstrap klasy narzędzie text-nowrap dotyczy white-space: nowrap wokół niego co oznacza, że ​​każdy tekst wewnątrz tej klasy nie złamie na nowej linii. Może to być przydatne, ale może być również bolesne podczas projektowania kodu responsywnego.

Jeśli masz kawałek tekstu, który chcesz, aby nie złamać, to najlepszym rozwiązaniem jest owinąć go wokół tego zamiast elementu nadrzędnego:

<div class="container"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio 
     <span class="text-nowrap">lobortis,</span> 
     condimentum ipsum in, vulputate felis. 
    </p> 
</div>