Texto largo: la tríada ellipsis

Cuando el texto es más largo que su contenedor, el navegador por defecto rompe la línea para que todo el texto sea visible. Hay casos donde esto no es deseable: listas de productos, tarjetas, tablas — donde cada título debe ocupar exactamente una línea.

La solución son tres propiedades que trabajan juntas: la tríada ellipsis.

white-space — ¿romper o no romper la línea?

white-space controla cómo el navegador maneja los espacios en blanco y los saltos de línea.

.titulo { white-space: nowrap; }   /* no romper la línea */
pre     { white-space: pre;    }   /* preservar saltos del HTML */

normal — colapsa espacios múltiples, rompe líneas cuando es necesario (default)
nowrap — no rompe líneas; el texto se extiende en una sola línea aunque desborde
pre — preserva espacios y saltos de línea del HTML (como el elemento <pre>)

Con nowrap, el texto puede desbordar su contenedor horizontalmente.

text-overflow — ¿cómo se ve el desborde?

text-overflow controla cómo se muestra el texto que ya desbordó.

ellipsis — agrega ... donde se cortó el texto
clip — corta el texto abruptamente sin indicador

Pero text-overflow solo tiene efecto si el desborde está oculto. Si el texto simplemente se sale del contenedor y se ve entero, text-overflow no hace nada.

La tríada — las 3 props juntas y en orden

.titulo-largo {
  white-space: nowrap;      /* 1. el texto NO rompe línea → puede desbordar */
  overflow: hidden;         /* 2. el contenedor OCULTA el desborde */
  text-overflow: ellipsis;  /* 3. muestra "..." donde se ocultó */
}

Por qué las tres son necesarias:

Sin esta prop	Consecuencia
Sin `white-space: nowrap`	El texto rompe línea → no desborda → `text-overflow` no tiene efecto
Sin `overflow: hidden`	El texto desborda y se ve entero → `text-overflow` no tiene efecto
Sin `text-overflow: ellipsis`	El texto se recorta sin indicador (comportamiento `clip`)

Conexión con CAT-22: overflow: hidden acá es una pieza de la tríada. En CAT-22 verás overflow en profundidad: scroll, auto, overflow-x/overflow-y y todos los casos de desborde de caja.

Nota sobre el motor: el efecto visual del ... no es validable por computed style — el validador confirma que las tres propiedades están declaradas, pero el ... real solo se ve en el preview. Verificalo en el sandbox antes de dar la lección por completada.

Tu turno: en el sandbox, aplicá las tres propiedades al .titulo-producto. Observá en el preview cómo el título largo queda recortado con ....