Texto truncado: la tríada ellipsis

En Tipografía y texto (CAT-20) viste brevemente white-space: nowrap y text-overflow: ellipsis para manejar texto largo. Ahora que entendés el overflow como mecanismo, podés entender por qué cada pieza de esa tríada es necesaria.

---

La tríada completa

Para truncar texto con ”…” necesitás exactamente tres propiedades aplicadas al mismo elemento:

.titulo {
  width: 250px;               /* necesita ancho fijo o heredado */
  white-space: nowrap;        /* 1. evita que el texto salte de línea */
  overflow: hidden;           /* 2. recorta el texto que desborda */
  text-overflow: ellipsis;    /* 3. muestra "…" donde cortó */
}

Las tres son obligatorias. Si falta alguna, el ”…” no aparece:

• Sin white-space: nowrap: el texto se envuelve en múltiples líneas → nunca desborda horizontalmente → text-overflow no activa.
• Sin overflow: hidden: el texto desborda y se muestra completo → no hay nada que truncar.
• text-overflow: ellipsis solo: no hace nada por sí sola. Solo actúa cuando ya hay overflow recortado por las otras dos.

Si falta…	Qué se ve
white-space: nowrap	El texto se parte en varias líneas. No hay ”…”.
overflow: hidden	El texto se sale del contenedor completo. No hay ”…”.
text-overflow: ellipsis	El texto se recorta de golpe, sin indicador visual.

---

Por qué funciona: el mecanismo del overflow

text-overflow no genera overflow — solo define cómo se representa el borde del recorte. Para que actúe, primero tiene que existir un desbordamiento horizontal (overflow: hidden o scroll) en un elemento con texto que no puede saltar de línea (white-space: nowrap).

La secuencia de eventos:

1. white-space: nowrap fuerza el texto a una sola línea larga.
2. Ese texto largo desborda el ancho del contenedor.
3. overflow: hidden recorta ese exceso.
4. text-overflow: ellipsis reemplaza el borde del recorte con ”…”.

---

Límite importante: solo una línea

text-overflow: ellipsis funciona únicamente para overflow horizontal de texto de una sola línea. Si querés truncar texto de múltiples líneas (por ejemplo, mostrar ”…” al final de la segunda o tercera línea), existe -webkit-line-clamp — una técnica avanzada que queda fuera de los fundamentos y se cubre en la sección de Referencia.

---

Tu turno: en el sandbox, aplicá la tríada al .titulo y comprobá que los títulos largos se trunquen con ”…” en el preview.

Nota sobre el motor: el validador comprueba los valores computados de white-space, overflow y text-overflow. Que el ”…” sea visible en el preview es el efecto visual — observalo ahí. Los computed de la tríada: "nowrap", "hidden" y "ellipsis".

---

Con esto completaste el repertorio de CSS sobre una sola caja. En los módulos anteriores aprendiste a construirla (Box Model), definir su tipo de flujo (Display), expresar sus medidas (Unidades), darle color y fondo, estilizar su contenido tipográfico, y ahora controlar qué pasa cuando ese contenido la desborda. A partir del siguiente bloque vas a aprender a disponer múltiples cajas juntas: flujo normal, Flexbox y CSS Grid.