Ellipsize in der mobilen Entwicklung — was es ist und Möglichkeiten zum Kürzen von Text

Was ist Ellipsize?

Ellipsize (von ellipsis — Auslassungspunkte) ist eine Technik zur Anzeige von Text, der die Containergröße überschreitet. Anstatt die Zeile einfach an der Grenze abzuschneiden, fügt ellipsize ein Auslassungszeichen (drei Punkte, Unicode U+2026) hinzu, das dem Benutzer das Vorhandensein von verstecktem Inhalt anzeigt.

Der Begriff ist im Android SDK etabliert, wo die Eigenschaft android:ellipsize das Verhalten von TextView bei Überlauf definiert. Auf iOS heißt die entsprechende Funktionalität Truncation und wird über NSLineBreakMode gesteuert. Im Web wird die CSS-Eigenschaft text-overflow mit dem Wert ellipsis verwendet.

Der Hauptzweck von ellipsize ist es, den Benutzer zu informieren, dass der Text gekürzt wurde. Im Gegensatz zum pixelbasierten Abschneiden, bei dem ein Wort in zwei Hälften gerissen werden kann, gewährleistet ellipsize die Lesbarkeit: Die Auslassungspunkte werden nach einem ganzen Wort oder Zeichen gesetzt, ohne es zu zerreißen. Dies entspricht den Prinzipien von Material Design und den Human Interface Guidelines.

Verwenden Sie ellipsize überall dort, wo die Containerbreite festgelegt ist und die Textlänge dynamisch ist: Artikelüberschriften, Tabellenzellen, beschriftete Schaltflächen, Kontakte in einer Liste, Breadcrumbs und Dateipfade.

Ellipsize in Android: TextView und Modi

In Android wird ellipsize über das Attribut android:ellipsize in XML oder die Methode setEllipsize() im Code konfiguriert. Vier Modi sind verfügbar, die jeweils bestimmen, welche Seite des Textes gekürzt wird.

Der Modus END (in den meisten Fällen Standard) kürzt das Ende der Zeile und setzt die Auslassungspunkte auf die rechte Seite des Containers. Der Modus START kürzt den Anfang — Auslassungspunkte links, sichtbarer Text rechts. MIDDLE kürzt die Mitte und lässt Anfang und Ende der Zeile sichtbar. Der Modus MARQUEE ist ein animiertes Scrollen des Textes, bei dem die Auslassungspunkte nicht angezeigt werden und der Text zyklisch scrollt.

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

Wichtig: ellipsize funktioniert nur in Kombination mit maxLines oder singleLine. Wenn die Anzahl der Zeilen nicht begrenzt wird, wächst die TextView in der Höhe und ellipsize wird nicht aktiviert. Seit Android 8.0 (API 26) unterstützt ellipsize den mehrzeiligen Modus mit maxLines > 1 — die Auslassungspunkte werden am Ende der letzten Zeile gesetzt.

Für die programmatische Verwendung rufen Sie TextUtils.TruncateAt mit einem der Werte END, START, MIDDLE, MARQUEE auf. Der Wert NONE deaktiviert ellipsize.

In der Praxis ist END für 90% der Fälle geeignet — Benutzer erwarten, dass der Text am Ende gekürzt wird. MIDDLE wird für Dateipfade verwendet (z.B. "/User/.../project/main.kt"), damit das Ende des Pfades sichtbar ist. START wird für Namen mit einem gemeinsamen Präfix verwendet (z.B. "...@gmail.com").

Textkürzung auf iOS: NSLineBreakMode

Auf iOS ist das Äquivalent zu ellipsize die Eigenschaft lineBreakMode der Klasse UILabel (und NSTextContainer für UITextView). Drei Kürzungsmodi sind verfügbar: .byTruncatingTail (Ende), .byTruncatingMiddle (Mitte) und .byTruncatingHead (Anfang).

Der Modus .byTruncatingTail entspricht android:ellipsize="end". .byTruncatingHead entspricht START, .byTruncatingMiddle entspricht MIDDLE. Der Modus .byClipping kürzt Text ohne Auslassungspunkte, was in modernen Schnittstellen selten verwendet wird. Der Modus .byCharWrapping bricht zeichenweise ohne Kürzung um.

let label = UILabel()
label.text = "Langer Text, der nicht in die Label-Grenzen passt"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString unterstützt ebenfalls lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

In iOS arbeitet die Kürzung mit numberOfLines zusammen. Wenn numberOfLines = 1 ist, wird der Text in einer einzelnen Zeile gekürzt. Wenn numberOfLines = 2 ist — in der zweiten Zeile. UITextView verwendet NSTextContainer.lineBreakMode, der ebenfalls alle drei Kürzungsmodi unterstützt.

Besonderheit von iOS: Der Modus .byTruncatingMiddle auf UILabel kann sich bei kurzen Zeichenfolgen unerwartet verhalten — wenn die Zeichenfolge vollständig passt, erscheinen die Auslassungspunkte nicht. Für eine garantierte Anzeige der Auslassungspunkte bei kurzen Zeichenfolgen verwenden Sie benutzerdefinierte Logik über sizeThatFits.

CSS text-overflow: Wie man Auslassungspunkte im Web hinzufügt

Im Web wird ellipsize über die CSS-Eigenschaft text-overflow: ellipsis in Kombination mit overflow: hidden und white-space: nowrap implementiert. Dies ist die Standardmethode, um eine Zeile mit Auslassungspunkten in Webschnittstellen zu kürzen.

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

Die Eigenschaft text-overflow funktioniert nicht ohne overflow: hidden — der Browser muss wissen, dass der Inhalt beschnitten wird. white-space: nowrap verhindert den Zeilenumbruch, andernfalls würde der Text in die nächste Zeile umbrechen und es würde kein Überlauf auftreten.

Für mehrzeilige Kürzung (z.B. 2 Zeilen mit Auslassungspunkten am Ende der zweiten) wurde früher die experimentelle Eigenschaft -webkit-line-clamp verwendet, die jetzt als line-clamp in CSS Overflow Level 4 standardisiert ist.

In der Praxis wird text-overflow: ellipsis seit über 10 Jahren von allen modernen Browsern unterstützt und ist die zuverlässigste Methode, Text im Web zu kürzen.

So wählen Sie den richtigen Kürzungsmodus

Die Wahl des Ellipsize-Modus beeinflusst die UX und kann die Wahrnehmung der Schnittstelle verbessern oder den Benutzer verwirren. Die Hauptregel: Der Benutzer erwartet, dass der gekürzte Teil dort ist, wo er für das Verständnis am wenigsten benötigt wird.

Der Modus END eignet sich für Überschriften, Beschriftungen, Titel — der Benutzer sieht den Anfang der Zeile und versteht den Kontext. Auslassungspunkte rechts bedeuten „es gibt mehr, aber es hat nicht gepasst“. Dies ist der intuitivste und gebräuchlichste Modus.

Der Modus MIDDLE ist unverzichtbar für Dateipfade, E-Mail-Adressen und lange Identifikatoren. Wenn das Ende der Zeile eindeutige Informationen enthält (Dateiname, Domain), sollte der Benutzer genau das sehen, während der Anfang gekürzt werden kann. Beispiel: "/User/.../important_document.pdf" — der Dateiname ist sofort sichtbar.

Der Modus START wird selten verwendet, ist aber nützlich für eine Liste von Kontakten mit einem gemeinsamen Präfix — zum Beispiel "...@gmail.com" statt "username@gmail.com", wenn alle Adressen zur gleichen Domain gehören. Dieses Muster verwirrt jedoch oft mehr als es hilft. Laut der Nielsen Norman Group lesen Benutzer von links nach rechts und erwarten wichtige Informationen am Anfang, daher erhöht die START-Kürzung die kognitive Belastung.

Der Modus MARQUEE (Laufschrift) ist nur für einzeilige Elemente mit geringer Aktualisierungshäufigkeit geeignet: den aktuellen Titel in einem Player, einen Nachrichtenticker, eine Statusleiste. Verwenden Sie marquee nicht für Tabellen, Listen oder Formulare — Animation lenkt ab und verringert die Leistung auf schwachen Geräten.

Häufige Probleme und ihre Lösungen

Das erste Problem — ellipsize funktioniert nicht. Die häufigste Ursache ist das Fehlen einer Zeilenbegrenzung. Ohne maxLines wächst die TextView in die Höhe und es kommt zu keinem Breitenüberlauf. Lösung: Geben Sie immer maxLines an (oder singleLine="true" für eine einzelne Zeile).

Das zweite Problem — Die Auslassungspunkte werden bei programmatischer Textänderung nicht angezeigt. Nach dem Aufruf von setText() wird die TextView möglicherweise nicht korrekt neu gezeichnet. Lösung: Rufen Sie invalidate() oder post(() -> requestLayout()) nach dem Ändern des Textes auf.

Das dritte Problem — unterschiedliches Verhalten auf verschiedenen Android-Versionen. Vor API 23 wurde ellipsize im mehrzeiligen Modus (maxLines > 1) nicht unterstützt. Lösung: Überprüfen Sie aus Kompatibilitätsgründen Build.VERSION.SDK_INT und verwenden Sie ViewCompat.setEllipsize() aus AndroidX.

Das vierte Problem — Das Auslassungszeichen wird in benutzerdefinierten Schriftarten nicht angezeigt. Wenn die Schriftart das Glyph U+2026 nicht enthält, werden die Auslassungspunkte durch drei Punkte ersetzt. Lösung: Überprüfen Sie die Schriftart auf das Vorhandensein des Auslassungsglyphs oder fügen Sie eine Fallback-Schriftart über fontFamily hinzu.