Ellipsize en desarrollo móvil — qué es y formas de truncar texto

¿Qué es Ellipsize?

Ellipsize (del inglés ellipsis — puntos suspensivos) es una técnica para mostrar texto que excede el tamaño del contenedor. En lugar de simplemente recortar la línea en el límite, ellipsize añade un carácter de puntos suspensivos (tres puntos, Unicode U+2026), indicando al usuario que hay contenido oculto.

El término está establecido en el SDK de Android, donde la propiedad android:ellipsize define el comportamiento de TextView ante el desbordamiento. En iOS, la funcionalidad análoga se llama truncamiento y se gestiona mediante NSLineBreakMode. En web se utiliza la propiedad CSS text-overflow con el valor ellipsis.

El propósito principal de ellipsize es informar al usuario de que el texto se ha acortado. A diferencia del recorte basado en píxeles, donde una palabra puede romperse por la mitad, ellipsize garantiza la legibilidad: los puntos suspensivos se colocan después de una palabra o carácter completo sin romperlo. Esto se alinea con los principios de Material Design y las Human Interface Guidelines.

Use ellipsize siempre que el ancho del contenedor sea fijo y la longitud del texto sea dinámica: encabezados de artículos, celdas de tabla, botones con etiquetas, contactos en una lista, migas de pan y rutas de archivos.

Ellipsize en Android: TextView y modos

En Android, ellipsize se configura mediante el atributo android:ellipsize en XML o el método setEllipsize() en código. Hay cuatro modos disponibles, cada uno determina qué lado del texto se truncará.

El modo END (predeterminado en la mayoría de los casos) trunca el final de la línea y coloca los puntos suspensivos en el lado derecho del contenedor. El modo START trunca el inicio — puntos suspensivos a la izquierda, texto visible a la derecha. MIDDLE trunca el medio, manteniendo visibles el inicio y el final de la línea. El modo MARQUEE es un desplazamiento animado del texto, donde los puntos suspensivos no se muestran y el texto se desplaza cíclicamente.

<!-- XML layout -->
<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Very long text that will be truncated"
    android:ellipsize="end"
    android:maxLines="1"
    android:singleLine="true" />

<!-- Kotlin code -->
textView.setEllipsize(TextUtils.TruncateAt.MIDDLE)

Importante: ellipsize solo funciona en combinación con maxLines o singleLine. Si no se limita el número de líneas, TextView crecerá en altura y ellipsize no se activará. Desde Android 8.0 (API 26), ellipsize admite modo multilínea con maxLines > 1 — los puntos suspensivos se colocan al final de la última línea.

Para uso programático, llame a TextUtils.TruncateAt con uno de los valores: END, START, MIDDLE, MARQUEE. El valor NONE desactiva ellipsize.

En la práctica, END es adecuado para el 90% de los casos — los usuarios esperan que el texto se trunque al final. MIDDLE se usa para rutas de archivos (por ejemplo, "/User/.../project/main.kt") para que el final de la ruta sea visible. START se usa para nombres con un prefijo común (por ejemplo, "...@gmail.com").

Truncamiento de texto en iOS: NSLineBreakMode

En iOS, el equivalente de ellipsize es la propiedad lineBreakMode de la clase UILabel (y NSTextContainer para UITextView). Hay tres modos de truncamiento disponibles: .byTruncatingTail (final), .byTruncatingMiddle (medio) y .byTruncatingHead (inicio).

El modo .byTruncatingTail corresponde a android:ellipsize="end". .byTruncatingHead corresponde a START, .byTruncatingMiddle a MIDDLE. El modo .byClipping trunca el texto sin puntos suspensivos, que rara vez se usa en interfaces modernas. El modo .byCharWrapping ajusta por caracteres sin truncamiento.

let label = UILabel()
label.text = "Long text that does not fit the label bounds"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString also supports lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

En iOS, el truncamiento funciona junto con numberOfLines. Si numberOfLines = 1, el texto se trunca en una sola línea. Si numberOfLines = 2 — en la segunda línea. UITextView usa NSTextContainer.lineBreakMode, que también admite los tres modos de truncamiento.

Particularidad de iOS: el modo .byTruncatingMiddle en UILabel puede comportarse de forma inesperada en cadenas cortas — si la cadena cabe completamente, los puntos suspensivos no aparecen. Para garantizar la visualización de los puntos suspensivos en cadenas cortas, use lógica personalizada mediante sizeThatFits.

CSS text-overflow: cómo añadir puntos suspensivos en web

En desarrollo web, ellipsize se implementa mediante la propiedad CSS text-overflow: ellipsis en combinación con overflow: hidden y white-space: nowrap. Esta es la forma estándar de truncar una línea con puntos suspensivos en interfaces web.

.text-cell {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

La propiedad text-overflow no funciona sin overflow: hidden — el navegador necesita saber que el contenido se está recortando. white-space: nowrap evita el ajuste de línea, de lo contrario el texto pasaría a la siguiente línea y no se produciría desbordamiento.

Para truncamiento multilínea (por ejemplo, 2 líneas con puntos suspensivos al final de la segunda), anteriormente se usaba la propiedad experimental -webkit-line-clamp, que ahora está estandarizada como line-clamp en CSS Overflow Level 4.

En la práctica, text-overflow: ellipsis es compatible con todos los navegadores modernos desde hace más de 10 años y es la forma más fiable de truncar texto en la web.

Cómo elegir el modo de truncamiento adecuado

La elección del modo de ellipsize afecta a la UX y puede mejorar la percepción de la interfaz o confundir al usuario. La regla principal: el usuario espera que la parte truncada esté donde menos se necesita para la comprensión.

El modo END es adecuado para encabezados, títulos, leyendas — el usuario ve el inicio de la línea y entiende el contexto. Unos puntos suspensivos a la derecha significan "hay más, pero no cabe". Este es el modo más intuitivo y común.

El modo MIDDLE es indispensable para rutas de archivos, direcciones de correo electrónico e identificadores largos. Cuando el final de la línea contiene información única (nombre de archivo, dominio), el usuario debería ver eso específicamente, mientras que el inicio puede acortarse. Ejemplo: "/User/.../important_document.pdf" — el nombre del archivo es inmediatamente visible.

El modo START rara vez se usa, pero es útil para listas de contactos con un prefijo común — por ejemplo, "...@gmail.com" en lugar de "username@gmail.com" cuando todas las direcciones pertenecen al mismo dominio. Sin embargo, este patrón suele confundir más que ayudar. Según el Nielsen Norman Group, los usuarios leen de izquierda a derecha y esperan información importante al principio, por lo que el truncamiento START aumenta la carga cognitiva.

El modo MARQUEE (texto desplazable) solo es apropiado para elementos de una sola línea con baja frecuencia de actualización: la pista actual en un reproductor, un ticker de noticias, una barra de estado. No use marquee para tablas, listas o formularios — la animación distrae y reduce el rendimiento en dispositivos débiles.

Problemas comunes y sus soluciones

El primer problema — ellipsize no funciona. La causa más frecuente es la ausencia de un límite de líneas. Sin maxLines, TextView crece en altura y no se produce desbordamiento de ancho. Solución: especifique siempre maxLines (o singleLine="true" para una sola línea).

El segundo problema — los puntos suspensivos no se muestran al cambiar el texto mediante programación. Después de llamar a setText(), es posible que TextView no se vuelva a dibujar correctamente. Solución: llame a invalidate() o post(() -> requestLayout()) después de cambiar el texto.

El tercer problema — comportamiento diferente en distintas versiones de Android. Antes de API 23, ellipsize en modo multilínea (maxLines > 1) no era compatible. Solución: para compatibilidad, verifique Build.VERSION.SDK_INT y use ViewCompat.setEllipsize() de AndroidX.

El cuarto problema — el carácter de puntos suspensivos no se muestra en fuentes personalizadas. Si la fuente no contiene el glifo U+2026, los puntos suspensivos se reemplazan por tres puntos. Solución: verifique que la fuente tenga el glifo de puntos suspensivos o añada una fuente de respaldo mediante fontFamily.