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?

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


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

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


14

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

 li {
    display: inline-block;
 }

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.