Ellipsize dans le développement mobile — ce que c'est et les méthodes de troncature de texte

Qu'est-ce que l'Ellipsize ?

Ellipsize (de ellipsis — points de suspension) est une technique d'affichage de texte qui dépasse la taille du conteneur. Au lieu de simplement couper la ligne à la limite, ellipsize ajoute un caractère de points de suspension (trois points, Unicode U+2026), indiquant à l'utilisateur la présence de contenu caché.

Le terme est établi dans le SDK Android, où la propriété android:ellipsize définit le comportement de TextView en cas de débordement. Sous iOS, la fonctionnalité analogue s'appelle la troncature et est gérée via NSLineBreakMode. Sur le web, la propriété CSS text-overflow avec la valeur ellipsis est utilisée.

Le but principal d'ellipsize est d'informer l'utilisateur que le texte a été raccourci. Contrairement au clipping basé sur les pixels où un mot peut être coupé en deux, ellipsize garantit la lisibilité : les points de suspension sont placés après un mot ou un caractère complet sans le briser. Cela est conforme aux principes du Material Design et des Human Interface Guidelines.

Utilisez ellipsize partout où la largeur du conteneur est fixe et la longueur du texte est dynamique : titres d'articles, cellules de tableau, boutons avec étiquettes, contacts dans une liste, fils d'Ariane et chemins de fichiers.

Ellipsize sous Android : TextView et modes

Sous Android, ellipsize se configure via l'attribut android:ellipsize en XML ou la méthode setEllipsize() dans le code. Quatre modes sont disponibles, chacun déterminant de quel côté le texte sera tronqué.

Le mode END (par défaut dans la plupart des cas) tronque la fin de la ligne et place les points de suspension sur le côté droit du conteneur. Le mode START tronque le début — points de suspension à gauche, texte visible à droite. MIDDLE tronque le milieu, en gardant le début et la fin de la ligne visibles. Le mode MARQUEE est un défilement animé du texte, où les points de suspension ne sont pas affichés et le texte défile cycliquement.

<!-- 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)

Important : ellipsize ne fonctionne qu'en combinaison avec maxLines ou singleLine. Si le nombre de lignes n'est pas limité, la TextView grandira en hauteur et ellipsize ne s'activera pas. Depuis Android 8.0 (API 26), ellipsize prend en charge le mode multiligne avec maxLines > 1 — les points de suspension sont placés à la fin de la dernière ligne.

Pour une utilisation programmatique, appelez TextUtils.TruncateAt avec l'une des valeurs : END, START, MIDDLE, MARQUEE. La valeur NONE désactive ellipsize.

En pratique, END convient dans 90 % des cas — les utilisateurs s'attendent à ce que le texte soit tronqué à la fin. MIDDLE est utilisé pour les chemins de fichiers (par exemple, "/User/.../project/main.kt") afin que la fin du chemin soit visible. START est utilisé pour les noms avec un préfixe commun (par exemple, "...@gmail.com").

Troncature de texte sous iOS : NSLineBreakMode

Sous iOS, l'équivalent d'ellipsize est la propriété lineBreakMode de la classe UILabel (et NSTextContainer pour UITextView). Trois modes de troncature sont disponibles : .byTruncatingTail (fin), .byTruncatingMiddle (milieu) et .byTruncatingHead (début).

Le mode .byTruncatingTail correspond à android:ellipsize="end". .byTruncatingHead correspond à START, .byTruncatingMiddle à MIDDLE. Le mode .byClipping tronque le texte sans points de suspension, ce qui est rarement utilisé dans les interfaces modernes. Le mode .byCharWrapping effectue un retour à la ligne par caractère sans troncature.

let label = UILabel()
label.text = "Texte long qui ne tient pas dans les limites de l'étiquette"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString supporte également lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

Sous iOS, la troncature fonctionne de pair avec numberOfLines. Si numberOfLines = 1, le texte est tronqué sur une seule ligne. Si numberOfLines = 2 — sur la deuxième ligne. UITextView utilise NSTextContainer.lineBreakMode, qui prend également en charge les trois modes de troncature.

Particularité d'iOS : le mode .byTruncatingMiddle sur UILabel peut se comporter de manière inattendue sur les chaînes courtes — si la chaîne tient entièrement, les points de suspension n'apparaissent pas. Pour garantir l'affichage des points de suspension sur les chaînes courtes, utilisez une logique personnalisée via sizeThatFits.

CSS text-overflow : comment ajouter des points de suspension sur le web

Dans le développement web, ellipsize est implémenté via la propriété CSS text-overflow: ellipsis en combinaison avec overflow: hidden et white-space: nowrap. C'est la façon standard de tronquer une ligne avec des points de suspension dans les interfaces web.

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

La propriété text-overflow ne fonctionne pas sans overflow: hidden — le navigateur a besoin de savoir que le contenu est clipé. white-space: nowrap empêche le retour à la ligne, sinon le texte passerait à la ligne suivante et le débordement ne se produirait pas.

Pour la troncature multiligne (par exemple, 2 lignes avec des points de suspension à la fin de la deuxième), la propriété expérimentale -webkit-line-clamp était autrefois utilisée, désormais standardisée sous le nom line-clamp dans CSS Overflow Level 4.

En pratique, text-overflow: ellipsis est pris en charge par tous les navigateurs modernes depuis plus de 10 ans et constitue la méthode la plus fiable pour tronquer du texte sur le web.

Comment choisir le bon mode de troncature

Le choix du mode d'ellipsize affecte l'UX et peut améliorer la perception de l'interface ou dérouter l'utilisateur. La règle principale : l'utilisateur s'attend à ce que la partie tronquée soit là où elle est la moins nécessaire à la compréhension.

Le mode END convient aux en-têtes, légendes, titres — l'utilisateur voit le début de la ligne et comprend le contexte. Des points de suspension à droite signifient « il y en a plus, mais ça n'a pas tenu ». C'est le mode le plus intuitif et le plus courant.

Le mode MIDDLE est indispensable pour les chemins de fichiers, les adresses e-mail et les identifiants longs. Lorsque la fin de la ligne contient des informations uniques (nom de fichier, domaine), l'utilisateur doit voir cela spécifiquement, tandis que le début peut être raccourci. Exemple : "/User/.../important_document.pdf" — le nom du fichier est immédiatement visible.

Le mode START est rarement utilisé mais utile pour une liste de contacts avec un préfixe commun — par exemple, "...@gmail.com" au lieu de "username@gmail.com" lorsque toutes les adresses appartiennent au même domaine. Cependant, ce modèle déroute souvent plus qu'il n'aide. Selon le Nielsen Norman Group, les utilisateurs lisent de gauche à droite et attendent des informations importantes au début, donc la troncature START augmente la charge cognitive.

Le mode MARQUEE (texte défilant) n'est approprié que pour les éléments à ligne unique à faible fréquence de mise à jour : le morceau en cours dans un lecteur, un ticker d'actualités, une barre d'état. N'utilisez pas marquee pour les tableaux, listes ou formulaires — l'animation distrait et réduit les performances sur les appareils faibles.

Problèmes courants et leurs solutions

Le premier problème — ellipsize ne fonctionne pas. La cause la plus fréquente est l'absence de limite du nombre de lignes. Sans maxLines, la TextView grandit en hauteur et aucun débordement de largeur ne se produit. Solution : spécifiez toujours maxLines (ou singleLine="true" pour une seule ligne).

Le deuxième problème — les points de suspension ne s'affichent pas lors du changement programmatique du texte. Après avoir appelé setText(), la TextView peut ne pas se redessiner correctement. Solution : appelez invalidate() ou post(() -> requestLayout()) après avoir modifié le texte.

Le troisième problème — comportement différent selon les versions d'Android. Avant l'API 23, ellipsize en mode multiligne (maxLines > 1) n'était pas pris en charge. Solution : pour la compatibilité, vérifiez Build.VERSION.SDK_INT et utilisez ViewCompat.setEllipsize() d'AndroidX.

Le quatrième problème — le caractère de points de suspension ne s'affiche pas dans les polices personnalisées. Si la police ne contient pas le glyphe U+2026, les points de suspension sont remplacés par trois points. Solution : vérifiez la présence du glyphe d'ellipsis dans la police ou ajoutez une police de secours via fontFamily.