text-overflow

text-overflow es la propiedad CSS que controla cómo se muestra el texto que sobresale del límite de su contenedor en una línea. Por sí sola no hace nada: solo tiene efecto cuando el texto ya está desbordando de forma oculta, es decir, cuando el contenedor tiene overflow distinto de visible y el texto no puede verse completo. En ese contexto, text-overflow decide si ese extremo invisible se muestra como un corte abrupto (clip) o como puntos suspensivos (ellipsis, el famoso …).

La propiedad resuelve un problema de UI muy concreto y frecuente: títulos de productos en tarjetas, nombres de archivo en listas, encabezados de columna en tablas — cualquier lugar donde el texto es potencialmente largo pero el espacio disponible es fijo. La alternativa de dejar que el texto rompa línea en esos contextos resulta en alturas variables que rompen el layout. La solución es la tríada del truncado, un patrón de tres propiedades que trabajan juntas. text-overflow es la tercera y visible de esas tres.

text-overflow no se hereda. A diferencia de la mayoría de las propiedades de texto (que sí se heredan), text-overflow no se propaga automáticamente a los hijos. Esto es coherente con su naturaleza: es un comportamiento de la caja que contiene el texto, no del texto en sí. Si tenés múltiples elementos que deben truncar, cada uno debe tener la propiedad declarada (o heredar de una clase común).

La tríada del truncado

text-overflow: ellipsis no funciona solo. Para que el … aparezca, las tres propiedades deben estar presentes simultáneamente:

.titulo-truncado {
  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:

Para el detalle de white-space: nowrap, ver white-space. Para overflow: hidden, ver overflow.

Sintaxis

selector {
  text-overflow: clip | ellipsis;
}

Valores

clip — recorte abrupto

El texto se corta exactamente en el borde del área de contenido del contenedor. No hay indicador visual de que hay más texto. Es el valor inicial de text-overflow.

.etiqueta { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;  /* recorta sin "..." */
}

Cuándo usar: cuando la UI deja claro por otros medios que el texto puede estar truncado (hover que muestra el completo, tooltip, expand), o cuando el truncado ocurre en el borde de un elemento decorativo donde el … sería visualmente incómodo.

ellipsis — puntos suspensivos

Muestra … (el carácter Unicode U+2026) en el extremo del texto visible, reemplazando los últimos caracteres que entran para hacer espacio al símbolo. Indica visualmente que hay contenido que no se ve.

.titulo-tarjeta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cuándo usar: listas de productos, tarjetas de contenido, nombres de archivo, títulos en tablas — cualquier interfaz donde el usuario debe saber que hay más texto del que se muestra.

Cuándo usar qué

Notas, gotchas e interacción

• text-overflow no se hereda. Cada elemento que necesite truncar debe tener la propiedad declarada. No alcanza con ponerla en el contenedor padre — los hijos no la reciben automáticamente.
• Sin los otros dos, no hace nada. Este es el error más frecuente: poner solo text-overflow: ellipsis y no ver el …. Sin white-space: nowrap el texto rompe línea y no desborda; sin overflow: hidden el desborde es visible y text-overflow no tiene qué resolver.
• text-overflow funciona solo en una línea. Para texto en múltiples líneas (los famosos “line-clamp” de tres líneas con …), necesitás -webkit-line-clamp o la propiedad estándar line-clamp del borrador CSS Overflow Level 4. text-overflow no cubre ese caso.
• El … reemplaza caracteres finales. Para que entre el símbolo …, el navegador recorta algunos caracteres del final del texto visible. Con fuentes muy grandes, el texto visible puede acortarse bastante. Es el comportamiento correcto.
• title como complemento de accesibilidad. Cuando truncás texto con …, los usuarios que no pueden ver el texto completo (o que no pueden hacer hover) no saben qué dice. Combinalo con el atributo title en el HTML para que el texto completo aparezca en tooltip al hacer hover, o con un aria-label si el truncado es en un elemento interactivo.
• Truncado en tablas. Para truncar texto en celdas de tabla, la celda necesita un ancho definido o max-width. Sin ancho, la tabla crece para acomodar el contenido y nunca hay desborde.

Vigente / legacy

text-overflow con los valores clip y ellipsis está completamente vigente y tiene soporte amplio. Fue introducido como extensión propietaria de Internet Explorer y luego estandarizado. No hay forma legacy. Los valores de string (para reemplazar el … por texto personalizado) son parte de CSS Overflow Level 4 y tienen soporte limitado.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Texto largo: la tríada ellipsis.