¿Cómo puedo evitar el salto de línea en un elemento en línea?

Question

Estoy construyendo un menú con entradas principales horizontales. Debajo de cada uno, los títulos de los submenús correspondientes se muestran verticalmente. Ahora, algunos títulos de menú más largos se envuelven en varias líneas. En realidad, el "sub" UL es tan ancho como la palabra más larga en un submenú y todos los demás están ajustados en consecuencia. No he dado ancho para UL ni LI (ni menú principal ni menú secundario).

Así que mi pregunta es, ¿cómo puedo evitar romper líneas? Probablemente podría sustituir cada espacio con   (carácter sin espacio), pero ¿hay alguna otra forma de lograrlo?

Answer 1

¿Has probado el estilo del li con

white-space: nowrap 

?

Answer 2

añadiendo el siguiente CSS impedirá que la línea de rotura:

li { 
    white-space: nowrap; 
} 

Answer 3

Hay una clase css utilidad text-nowrap. Puede encontrarlo en la sección de la utilidad del docs.

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

Answer 4

con la respuesta de M K, la clase de utilidad de arranque text-nowrap aplica white-space: nowrap alrededor de él lo que significa que cualquier texto dentro de esta clase no se romperá en una nueva línea. Esto puede ser útil, pero también puede ser doloroso cuando se diseña un código receptivo.

Si usted tiene un trozo de texto que le gustaría para no romper, es la mejor práctica para envolverlo alrededor de este lugar del elemento padre:

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