Come posso evitare un'interruzione di riga in un elemento in linea?

Question

Sto costruendo un menu con voci principali orizzontali. Sotto ciascuno di essi vengono visualizzati verticalmente i titoli dei sottomenu corrispondenti. Ora alcuni titoli di menu più lunghi sono disposti su più righe. In realtà, il "sub" UL è largo quanto la parola singola più lunga in un sottomenu e tutti gli altri sono avvolti di conseguenza. Non ho dato alcuna larghezza per UL né LI (né menu principale né sottomenu).

Quindi la mia domanda è: come posso evitare le linee di rottura? Probabilmente potrei sostituire ogni spazio con   (carattere senza spazio), ma esiste un modo diverso per raggiungere questo obiettivo?

Answer 1

Hai provato styling la Li con

white-space: nowrap 

?

Answer 2

aggiungendo il seguente CSS impedirà la linea di rottura:

li { 
    white-space: nowrap; 
} 

Answer 3

C'è un programma di utilità classe CSS text-nowrap. Puoi trovarlo nella sezione dell'utilità dello docs.

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

Answer 4

seguito alla risposta di M K, la classe di utilità bootstrap text-nowrap vale white-space: nowrap intorno che significa che qualsiasi testo all'interno di questa classe non si romperà su una nuova linea. Questo può essere utile ma può anche essere doloroso quando si progetta un codice reattivo.

Se si dispone di un pezzo di testo che si desidera di non rompere, è buona norma avvolgerla intorno a questo posto dell'elemento genitore:

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