Cómo evitar saltos de línea en elementos de lista usando CSS
Estoy intentando poner un enlace llamado Enviar currículum en un menú usando una lietiqueta. Debido al espacio en blanco entre las dos palabras, se ajusta a dos líneas. ¿Cómo evitar este ajuste con CSS?
Utilice white-space: nowrap;[1] [2] o déle más espacio a ese enlace estableciendo liel ancho de ' en valores mayores.
[1] § 3. Espacios en blanco y ajuste: la propiedad de espacios en blanco - Módulo de texto CSS W3 Nivel 3
[2] espacios en blanco - CSS: Hojas de estilo en cascada | MDN
Puedes 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 caber en una línea:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Si desea lograr esto de forma selectiva (es decir, solo a ese enlace en particular), puede usar un espacio sin separación en lugar de un espacio normal:
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
Editar: entiendo que esto es HTML, no CSS como lo solicita el OP, pero algunos pueden encontrarlo útil...
display: inline-block;evitará la ruptura entre las palabras en un elemento de la lista:
li {
display: inline-block;
}
Bootstrap 4 tiene una clase llamada text-nowrap. Es justo lo que necesitas.
