nbsp - salto de linea html

¿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 de los submenús correspondientes, los títulos se muestran verticalmente. Ahora, algunos títulos de menú más largos se envuelven en varias líneas. En realidad, la "sub" UL es tan amplia como la palabra más larga en un submenú y todas las demás están envueltas en consecuencia. No he dado ancho para UL ni para LI (ni menú principal ni submenú).

Entonces mi pregunta es, ¿cómo puedo evitar romper líneas? Probablemente podría sustituir cada espacio con   (carácter sin espacio), pero ¿hay una manera diferente de lograr esto?

Answer 1

¿Has intentado estilizar el li con

white-space: nowrap

?

Answer 2

Además de la respuesta de MK, la clase de utilidad bootstrap text-nowrap aplica white-space: nowrap a su alrededor, lo que significará que cualquier texto dentro de esta clase no entrará en una nueva línea. Esto puede ser útil pero también puede ser doloroso al diseñar código de respuesta.

Si tiene un fragmento de texto que no desea que se rompa, se recomienda envolverlo en lugar del elemento principal:

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

Answer 3

Hay una utilidad css class text-nowrap . Lo puedes encontrar en la sección de utilidades de los docs .

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

Answer 4

agregar el siguiente CSS evitará que la línea se rompa:

li {
   white-space: nowrap;
}