Cuando trabajas en el diseño de una página web, es bastante habitual que necesites evitar que un texto salte de línea con CSS para mantener determinados elementos en una única fila.
Un botón, un precio, una etiqueta, una opción de menú o incluso un pequeño encabezado pueden quedar visualmente extraños cuando el navegador decide dividir el contenido en dos líneas.
La buena noticia es que CSS incluye una propiedad específica que te permite controlar este comportamiento de una forma tremendamente sencilla.
En este tutorial vas a aprender cómo impedir los saltos de línea en CSS, cómo ocultar el contenido sobrante y cómo añadir puntos suspensivos cuando el espacio disponible es limitado.
Evitar que un texto salte de línea con white-space
La solución más sencilla para mantener un texto completo en una misma línea consiste en utilizar la propiedad white-space con el valor nowrap.
Puedes aplicar este código CSS al elemento que quieras mantener en una única línea:
.texto-sin-salto {
white-space: nowrap;
}La propiedad white-space: nowrap; obliga al navegador a mantener el texto en una única línea aunque el contenido necesite más espacio horizontal del disponible.
Puedes encontrar información adicional sobre esta propiedad en la documentación de white-space de MDN.
Si tienes un elemento HTML como el siguiente:
<p class="texto-sin-salto">
Este texto permanecerá siempre en una única línea.
</p>El navegador intentará mostrar todo el contenido seguido y sin realizar saltos automáticos de línea.
Cómo funciona white-space: nowrap
De forma predeterminada, los navegadores permiten que los textos se dividan cuando alcanzan el límite horizontal de su contenedor.
Al utilizar white-space: nowrap desactivas ese comportamiento automático y fuerzas al navegador a continuar mostrando las palabras horizontalmente.
Esto puede resultar especialmente útil cuando quieres conservar la estructura visual de elementos relativamente pequeños.
📌 Algunos ejemplos habituales donde puedes utilizarlo son botones, menús, precios, etiquetas, breadcrumbs, títulos cortos y elementos de navegación.
Debes tener en cuenta que el texto puede terminar sobresaliendo de su contenedor si este no dispone de espacio suficiente.
Evitar saltos de línea y ocultar el texto sobrante
En muchos diseños no basta con mantener el texto en una sola línea porque también necesitas evitar que el contenido sobresalga del contenedor.
Puedes combinar white-space con la propiedad overflow de la siguiente manera:
.texto-sin-salto {
white-space: nowrap;
overflow: hidden;
}Con esta combinación consigues que el texto permanezca en una línea y que cualquier parte que supere el ancho disponible quede oculta.
Esta solución resulta especialmente práctica cuando trabajas con tarjetas, widgets, tablas o bloques cuya anchura debe permanecer constante.
Mostrar puntos suspensivos cuando el texto es demasiado largo
Una de las alternativas más elegantes consiste en mostrar puntos suspensivos al final del contenido recortado.
Para conseguirlo necesitas combinar tres propiedades CSS:
.texto-sin-salto {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}La propiedad text-overflow: ellipsis muestra tres puntos cuando el contenido ya no cabe dentro del espacio disponible.
Por ejemplo, un texto como:
Curso completo de diseño web con WordPress para principiantesPodría aparecer visualmente como:
Curso completo de diseño web...Este comportamiento permite indicar al usuario que existe más contenido del que se está mostrando sin romper la distribución del diseño.
Puedes profundizar sobre esta propiedad consultando la documentación de text-overflow en MDN.
Es necesario definir un ancho
Para que text-overflow: ellipsis funcione correctamente necesitas que el navegador pueda determinar cuál es el espacio máximo disponible para el elemento.
Puedes establecer un ancho concreto:
.texto-sin-salto {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}También puedes utilizar max-width si quieres disponer de un diseño algo más flexible:
.texto-sin-salto {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}En diseños adaptables suele resultar más interesante utilizar anchos relativos, max-width o unidades flexibles en lugar de establecer siempre una medida rígida en píxeles.
Cómo evitar que un texto salte de línea paso a paso
Si simplemente quieres aplicar esta solución en tu página, puedes hacerlo siguiendo estos pasos:
- 🔎 Identifica el elemento HTML cuyo texto quieres mantener en una única línea.
- 🏷️ Añade una clase CSS específica al elemento para poder modificarlo fácilmente.
- 🎨 Aplica la propiedad
white-space: nowrap;a esa clase. - ✂️ Añade
overflow: hidden;si necesitas impedir que el texto sobresalga del contenedor. - ➡️ Utiliza
text-overflow: ellipsis;si quieres mostrar puntos suspensivos cuando el texto no quepa. - 📱 Comprueba el resultado en diferentes tamaños de pantalla para asegurarte de que el diseño continúa funcionando correctamente en móviles.
Un código bastante completo para la mayoría de situaciones sería este:
.texto-una-linea {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Con estas pocas líneas puedes conseguir un resultado limpio y evitar muchos de los problemas provocados por textos demasiado largos dentro de contenedores pequeños.
Evitar que el texto de un botón salte de línea
Los botones son uno de los elementos donde más habitualmente interesa impedir los saltos de línea.
Puedes utilizar este código:
.boton {
white-space: nowrap;
}De esta manera, un botón con un texto como “Solicitar información ahora” permanecerá en una única línea siempre que la estructura de la página permita mostrarlo.
Si trabajas con WordPress, esta técnica también puede utilizarse sobre botones creados con Gutenberg, Elementor, Spectra y otros constructores visuales.
Evitar saltos de línea en enlaces
También puedes aplicar nowrap directamente sobre determinados enlaces.
.enlace-sin-salto {
white-space: nowrap;
}Esta solución es especialmente útil en menús de navegación donde no quieres que una opción aparezca dividida en dos líneas.
En determinadas situaciones puedes combinar esta propiedad con Flexbox para conseguir una distribución mucho más estable.
Usar white-space dentro de Flexbox
Los elementos colocados dentro de un contenedor Flexbox pueden reducirse cuando el espacio disponible empieza a escasear.
Puedes crear una estructura como esta:
.contenedor {
display: flex;
}
.elemento {
white-space: nowrap;
}Si necesitas impedir además que determinados elementos reduzcan su anchura puedes utilizar:
.elemento {
white-space: nowrap;
flex-shrink: 0;
}La propiedad flex-shrink: 0 impide que el elemento se comprima automáticamente dentro del contenedor flexible.
Puedes ampliar información sobre este sistema en la guía de Flexbox de MDN.
Diferencia entre nowrap, overflow y ellipsis
Aunque estas propiedades suelen utilizarse juntas, cada una cumple una función diferente dentro del diseño.
| Propiedad | Función principal | Cuándo utilizarla |
|---|---|---|
white-space: nowrap | Evita que el texto pase a otra línea | Cuando quieres mantener el contenido en una sola fila |
overflow: hidden | Oculta el contenido que sobresale | Cuando quieres respetar el tamaño del contenedor |
text-overflow: ellipsis | Añade puntos suspensivos | Cuando quieres indicar visualmente que hay texto oculto |
max-width | Limita el ancho máximo | Cuando necesitas controlar dónde empieza el recorte |
flex-shrink: 0 | Evita que un elemento Flexbox se reduzca | Cuando quieres conservar su anchura dentro de un contenedor flexible |
Esta combinación te permite decidir con bastante precisión qué debe ocurrir cuando un contenido supera el espacio disponible.
Cuidado con utilizar nowrap en dispositivos móviles
Aunque impedir un salto de línea puede mejorar considerablemente determinados diseños, utilizar nowrap indiscriminadamente puede crear problemas en pantallas pequeñas.
Un texto excesivamente largo puede provocar desbordamiento horizontal y hacer que aparezca una molesta barra de desplazamiento lateral.
📱 Por esta razón conviene probar siempre el resultado en diferentes resoluciones antes de aplicar la regla definitivamente.
También puedes utilizar una media query para aplicar el comportamiento únicamente en pantallas suficientemente grandes:
@media (min-width: 768px) {
.texto-sin-salto {
white-space: nowrap;
}
}De esta manera permites que el texto vuelva a comportarse normalmente en teléfonos móviles mientras mantienes una única línea en ordenadores y tablets de mayor tamaño.
Cómo permitir otra vez los saltos de línea
Si anteriormente has utilizado nowrap y necesitas recuperar el comportamiento habitual del navegador puedes utilizar:
.texto-sin-salto {
white-space: normal;
}El valor normal devuelve al texto su comportamiento convencional y permite realizar saltos de línea cuando resulte necesario.
Esto puede resultar particularmente útil cuando necesitas cambiar el comportamiento mediante media queries.
Qué solución deberías utilizar
Si únicamente quieres impedir que una frase pase a una segunda línea, utiliza white-space: nowrap.
Si además necesitas que el contenido no se salga de su espacio disponible, combina white-space: nowrap con overflow: hidden.
Si quieres conseguir un acabado más cuidado, añade text-overflow: ellipsis para mostrar puntos suspensivos cuando el texto sea demasiado largo.
✅ La combinación más habitual y versátil es la siguiente:
.texto-una-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Con este pequeño fragmento puedes evitar que un texto salte de línea con CSS y mantener bajo control prácticamente cualquier contenido que deba permanecer en una única fila.
Conclusión
Evitar que un texto cambie automáticamente de línea es muy sencillo gracias a white-space: nowrap, una propiedad CSS pequeña pero especialmente útil en numerosos diseños web.
Si además combinas esta regla con overflow: hidden y text-overflow: ellipsis, conseguirás controlar textos largos sin romper la estructura de botones, tarjetas, menús o cualquier otro elemento.
Lo importante es utilizar estas propiedades con criterio y comprobar siempre su comportamiento en pantallas pequeñas para conservar un diseño responsive, limpio y fácil de utilizar.
