Cómo evitar saltos de línea en elementos de la lista usando CSS

513

Estoy tratando de 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 esta envoltura con CSS?

html css word-wrap Rajasekar
fuente

Respuestas:

969

Use white-space: nowrap;[1] [2] o dele a ese enlace más espacio configurando liel ancho a valores mayores.

[1] § 3. Espacio en blanco y ajuste: la propiedad de espacio en blanco - Módulo de texto CSS W3 Nivel 3
[2] espacio en blanco - CSS: Hojas de estilo en cascada | MDN

n1313
fuente
41
Debe hacer referencia a W3C en lugar de ese temido y a menudo incorrecto sitio web de w3schools. w3.org/TR/css3-text/#white-space0
Sebastien Martin
53
O simplemente haga referencia a la red de desarrolladores de
Chris Esplin
44
Prevení el salto de línea en artículos li usando display: inline;. Quizás esto también ayude a otros con problemas similares.
Es importante tener cuidado con la pantalla: en línea, ya que puede tener efectos secundarios. espacio en blanco: nowrap; tiene solo un efecto.
Crispen Smith
En este caso, se produce un desbordamiento de texto. ¿Cómo prevenir eso?
147

Puede agregar este pequeño fragmento de código para agregar un agradable "..." 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;
}
JimmyRare
fuente
Estaba buscando una solución de sujeción de texto, pero me quedaré con esta solución
JorgeGarza
33

Si desea lograr esto de forma selectiva (es decir, solo a ese enlace en particular), puede usar un espacio que no se rompa en lugar de un espacio normal:

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

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

editar: entiendo que esto es HTML, no CSS según lo solicitado por el OP, pero algunos pueden encontrarlo útil ...

ptim
fuente
14

pantalla: bloque en línea; evitará la ruptura entre las palabras en un elemento de la lista

 li {
    display: inline-block;
 }
Nadeesh Peiris
fuente
1
Si hago clic en jsfiddle y ajusto el ancho de la salida, los elementos de la lista individual se dividen entre la palabra "lista" y el número, que es exactamente lo que el OP no quiere ...
GentlePurpleRain
4

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

Yevgeniy Afanasyev
fuente
2
Preferiría evitar recomendar el uso de Bootstrap en 2019.
Broda Noel
2
@BrodaNoel ¿Por qué?
Yevgeniy Afanasyev