html - linea - Cómo evitar saltos de línea en los elementos de lista usando CSS

salto de linea html sin br

Question

Estoy tratando de poner un enlace llamado Enviar curriculum vitae en un menú usando una etiqueta li . Debido al espacio en blanco entre las dos palabras, se ajusta a dos líneas. ¿Cómo evitar esta envoltura con CSS?

Answer 1

Bootstrap 4 tiene una clase llamada text-nowrap . Es justo lo que necesitas.

Answer 2

Puede agregar este pequeño fragmento de código para agregar un bonito "..." al final de la línea si el contenido es demasiado grande para que quepa en una sola línea:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

Answer 3

Si desea lograr esto de forma selectiva (es decir, solo para ese enlace en particular), puede usar un espacio sin interrupciones en lugar de un espacio normal:

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

http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

edición: entiendo que esto es HTML, no CSS como lo solicita el OP, pero a algunos les puede resultar útil ...

Answer 4

Usa white-space: nowrap; ¹ , o dé más espacio a ese enlace estableciendo el ancho de li en valores mayores.

Answer 5

pantalla: bloque en línea; evitará saltos de línea en los elementos de la lista

http://jsfiddle.net/Nash171/mwe4s0nc/46/

 li{
    display: inline-block;
 }