September 19, 2025
La magia de width 0 y flex 1 para un truncado de texto perfecto en layouts flexibles
HTML/CSS
Si alguna vez has trabajado con layouts flexibles en CSS, seguramente te habrás topado con este problema: un elemento que se estira demasiado, empuja todo lo demás y rompe el diseño. Esto se vuelve aún más frustrante cuando quieres truncar texto largo con los famosos puntos suspensivos (...) y, por algún motivo, simplemente no funciona.
El problema típico
Imagina este escenario:
<div class="track-row">
<div class="badge">E</div>
<div class="track-artists">
Alemán, Canserbero, Kase.O, santa suerte, Santa Fe Klan, Al2 El Aldeano, Akapellah, Foyone, Toño Lizarraga, Solitario Mondragon & Norick
</div>
<div class="actions">...</div>
</div>Le aplicamos las propiedades de truncado más comunes:
.track-artists {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Pero sorpresa: el texto sigue empujando el contenedor como si nuestras reglas no existieran.
Antes
Después
(ya no se produce overflow)
La solución mágica: width: 0 + flex: 1
La clave está en añadir dos propiedades que trabajan en conjunto:
.track-artists {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 0; /* Fuerza un ancho inicial de cero */
flex: 1; /* Ocupa el espacio disponible sin excederse */
}¿Por qué funciona?
width: 0— Obliga al elemento a comenzar con ancho cero, ignorando el tamaño de su contenido.
flex: 1— Permite que crezca para ocupar el espacio disponible, pero sin empujar más de la cuenta.
Es equivalente a:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;Con esta combinación, el elemento:
- Arranca en cero de ancho.
- Se expande justo lo necesario para encajar en el layout.
- Respeta el truncado (
...) cuando el contenido no cabe.
Visualmente…
Antes:
Después:
Más allá del truncado de texto
Este patrón no solo sirve para truncar texto. Aquí tienes más casos útiles:
Columnas de igual ancho
.container {
display: flex;
}
.column {
width: 0;
flex: 1; /* Todas ocupan el mismo espacio */
}Layout con sidebar y contenido principal
.layout {
display: flex;
}
.sidebar {
width: 250px;
flex-shrink: 0; /* No se encoge */
}
.content {
width: 0;
flex: 1; /* Se adapta al resto del espacio */
}Formularios con botón
.form-row {
display: flex;
}
.input {
width: 0;
flex: 1; /* El input se expande */
}
.button {
flex-shrink: 0; /* El botón mantiene su tamaño */
}Conclusión
width: 0 + flex: 1 es una de esas pequeñas joyas de CSS que, aunque sencilla, resuelve problemas muy comunes en diseños flexibles. No solo arregla el truncado de texto, sino que también te permite crear layouts más predecibles y controlados.
La próxima vez que un texto largo arruine tu flex layout, ya sabes la fórmula mágica:
width: 0;
flex: 1;
Written by Pol Valle
I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.