La magia de width 0 y flex 1 para un truncado de texto perfecto en layouts flexibles

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.

Imagina este escenario:

Le aplicamos las propiedades de truncado más comunes:

Pero sorpresa: el texto sigue empujando el contenedor como si nuestras reglas no existieran.

(ya no se produce overflow)

La clave está en añadir dos propiedades que trabajan en conjunto:

1. width: 0 — Obliga al elemento a comenzar con ancho cero, ignorando el tamaño de su contenido.

2. flex: 1 — Permite que crezca para ocupar el espacio disponible, pero sin empujar más de la cuenta.

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.

Antes:

Después:

Este patrón no solo sirve para truncar texto. Aquí tienes más casos útiles:

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: