Ellipsize nello sviluppo mobile — cos'è e metodi di troncamento del testo

Cos'è Ellipsize?

Ellipsize (da ellipsis — puntini di sospensione) è una tecnica per visualizzare testo che supera le dimensioni del contenitore. Invece di tagliare semplicemente la riga al confine, ellipsize aggiunge un carattere di puntini di sospensione (tre punti, Unicode U+2026), indicando all'utente la presenza di contenuto nascosto.

Il termine è consolidato nell'Android SDK, dove la proprietà android:ellipsize definisce il comportamento di TextView in caso di overflow. Su iOS, la funzionalità analoga si chiama troncamento ed è gestita tramite NSLineBreakMode. Sul web, viene utilizzata la proprietà CSS text-overflow con il valore ellipsis.

Lo scopo principale di ellipsize è informare l'utente che il testo è stato accorciato. A differenza del taglio basato sui pixel, dove una parola può essere spezzata a metà, ellipsize garantisce la leggibilità: i puntini di sospensione vengono posizionati dopo una parola o un carattere completo senza spezzarlo. Questo è in linea con i principi di Material Design e delle Human Interface Guidelines.

Utilizza ellipsize ovunque la larghezza del contenitore sia fissa e la lunghezza del testo sia dinamica: titoli di articoli, celle di tabella, pulsanti con etichette, contatti in un elenco, breadcrumb e percorsi di file.

Ellipsize in Android: TextView e modalità

In Android, ellipsize si configura tramite l'attributo android:ellipsize in XML o il metodo setEllipsize() nel codice. Sono disponibili quattro modalità, ciascuna determina quale lato del testo verrà troncato.

La modalità END (predefinita nella maggior parte dei casi) tronca la fine della riga e posiziona i puntini di sospensione sul lato destro del contenitore. La modalità START tronca l'inizio — puntini di sospensione a sinistra, testo visibile a destra. MIDDLE tronca il mezzo, mantenendo visibili l'inizio e la fine della riga. La modalità MARQUEE è uno scorrimento animato del testo, in cui i puntini di sospensione non vengono mostrati e il testo scorre ciclicamente.

<!-- 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 funziona solo in combinazione con maxLines o singleLine. Se il numero di righe non è limitato, la TextView crescerà in altezza e ellipsize non si attiverà. Da Android 8.0 (API 26), ellipsize supporta la modalità multilinea con maxLines > 1 — i puntini di sospensione vengono posizionati alla fine dell'ultima riga.

Per l'uso programmatico, chiama TextUtils.TruncateAt con uno dei valori: END, START, MIDDLE, MARQUEE. Il valore NONE disabilita ellipsize.

In pratica, END è adatto nel 90% dei casi — gli utenti si aspettano che il testo venga troncato alla fine. MIDDLE viene utilizzato per i percorsi di file (ad esempio, "/User/.../project/main.kt") in modo che la fine del percorso sia visibile. START viene utilizzato per nomi con un prefisso comune (ad esempio, "...@gmail.com").

Troncamento del testo su iOS: NSLineBreakMode

Su iOS, l'equivalente di ellipsize è la proprietà lineBreakMode della classe UILabel (e NSTextContainer per UITextView). Sono disponibili tre modalità di troncamento: .byTruncatingTail (fine), .byTruncatingMiddle (mezzo) e .byTruncatingHead (inizio).

La modalità .byTruncatingTail corrisponde a android:ellipsize="end". .byTruncatingHead corrisponde a START, .byTruncatingMiddle a MIDDLE. La modalità .byClipping tronca il testo senza puntini di sospensione, che viene raramente utilizzata nelle interfacce moderne. La modalità .byCharWrapping va a capo per caratteri senza troncamento.

let label = UILabel()
label.text = "Testo lungo che non rientra nei limiti dell'etichetta"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString supporta anche lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

Su iOS, il troncamento funziona insieme a numberOfLines. Se numberOfLines = 1, il testo viene troncato su una singola riga. Se numberOfLines = 2 — sulla seconda riga. UITextView utilizza NSTextContainer.lineBreakMode, che supporta anche tutte e tre le modalità di troncamento.

Particolarità di iOS: la modalità .byTruncatingMiddle su UILabel può comportarsi in modo imprevisto su stringhe corte — se la stringa entra completamente, i puntini di sospensione non appaiono. Per garantire la visualizzazione dei puntini di sospensione su stringhe corte, utilizza una logica personalizzata tramite sizeThatFits.

CSS text-overflow: come aggiungere puntini di sospensione sul web

Nello sviluppo web, ellipsize viene implementato tramite la proprietà CSS text-overflow: ellipsis in combinazione con overflow: hidden e white-space: nowrap. Questo è il modo standard per troncare una riga con puntini di sospensione nelle interfacce web.

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

La proprietà text-overflow non funziona senza overflow: hidden — il browser deve sapere che il contenuto viene tagliato. white-space: nowrap impedisce l'interruzione di riga, altrimenti il testo passerebbe alla riga successiva e l'overflow non si verificherebbe.

Per il troncamento multilinea (ad esempio, 2 righe con puntini di sospensione alla fine della seconda), in precedenza veniva utilizzata la proprietà sperimentale -webkit-line-clamp, ora standardizzata come line-clamp in CSS Overflow Level 4.

In pratica, text-overflow: ellipsis è supportato da tutti i browser moderni da oltre 10 anni ed è il metodo più affidabile per troncare il testo sul web.

Come scegliere la modalità di troncamento corretta

La scelta della modalità di ellipsize influenza l'UX e può migliorare la percezione dell'interfaccia o confondere l'utente. La regola principale: l'utente si aspetta che la parte troncata sia dove è meno necessaria per la comprensione.

La modalità END è adatta per intestazioni, didascalie, titoli — l'utente vede l'inizio della riga e comprende il contesto. Dei puntini di sospensione a destra significano "c'è altro, ma non è entrato". Questa è la modalità più intuitiva e comune.

La modalità MIDDLE è indispensabile per percorsi di file, indirizzi email e identificatori lunghi. Quando la fine della riga contiene informazioni uniche (nome file, dominio), l'utente dovrebbe vedere proprio quello, mentre l'inizio può essere accorciato. Esempio: "/User/.../important_document.pdf" — il nome del file è immediatamente visibile.

La modalità START viene raramente utilizzata ma è utile per un elenco di contatti con un prefisso comune — ad esempio, "...@gmail.com" invece di "username@gmail.com" quando tutti gli indirizzi appartengono allo stesso dominio. Tuttavia, questo schema spesso confonde più di quanto aiuti. Secondo il Nielsen Norman Group, gli utenti leggono da sinistra a destra e si aspettano informazioni importanti all'inizio, quindi il troncamento START aumenta il carico cognitivo.

La modalità MARQUEE (testo scorrevole) è appropriata solo per elementi a riga singola con bassa frequenza di aggiornamento: il brano corrente in un lettore, un ticker di notizie, una barra di stato. Non utilizzare marquee per tabelle, elenchi o moduli — l'animazione distrae e riduce le prestazioni sui dispositivi deboli.

Problemi comuni e relative soluzioni

Il primo problema — ellipsize non funziona. La causa più frequente è l'assenza di un limite di righe. Senza maxLines, la TextView cresce in altezza e non si verifica overflow di larghezza. Soluzione: specifica sempre maxLines (o singleLine="true" per una singola riga).

Il secondo problema — i puntini di sospensione non vengono mostrati quando si modifica il testo programmaticamente. Dopo aver chiamato setText(), la TextView potrebbe non ridisegnarsi correttamente. Soluzione: chiama invalidate() o post(() -> requestLayout()) dopo aver modificato il testo.

Il terzo problema — comportamento diverso su diverse versioni di Android. Prima di API 23, ellipsize in modalità multilinea (maxLines > 1) non era supportato. Soluzione: per compatibilità, controlla Build.VERSION.SDK_INT e utilizza ViewCompat.setEllipsize() da AndroidX.

Il quarto problema — il carattere dei puntini di sospensione non viene visualizzato nei caratteri personalizzati. Se il font non contiene il glifo U+2026, i puntini di sospensione vengono sostituiti da tre punti. Soluzione: controlla che il font abbia il glifo di ellipsis o aggiungi un font di fallback tramite fontFamily.