Ellipsize i mobil utveckling — vad är det och sätt att kapa text

Vad är Ellipsize?

Ellipsize (från engelskans ellipsis — tre punkter) — är en teknik för att visa text som överskrider behållarens dimensioner. Istället för att helt enkelt kapa raden vid gränsen (clip), lägger ellipsize till en symbol för tre punkter (Unicode U+2026), som indikerar för användaren att det finns dolt innehåll.

Termen har etablerats i Android SDK, där egenskapen android:ellipsize bestämmer TextView-beteendet vid överflöde. På iOS kallas motsvarande funktionalitet truncation (kapning) och hanteras via NSLineBreakMode. På webben används CSS-egenskapen text-overflow med värdet ellipsis.

Huvudsyftet med ellipsize är att informera användaren om att texten har förkortats. Till skillnad från pixelkapning, där ett ord kan delas på mitten, garanterar ellipsize läsbarhet: tre punkter placeras efter ett helt ord eller tecken utan att bryta det. Detta överensstämmer med principerna i Material Design och Human Interface Guidelines.

Använd ellipsize överallt där behållarens bredd är fast och textlängden är dynamisk: artikelrubriker, tabellceller, knappar med etiketter, kontakter i listor, brödsmulor och filsökvägar.

Ellipsize i Android: TextView och lägen

I Android konfigureras ellipsize via attributet android:ellipsize i XML eller metoden setEllipsize() i kod. Fyra lägen finns tillgängliga, som var och en bestämmer från vilken sida texten ska kapas.

Läget END (standard i de flesta fall) kapar slutet av raden och placerar tre punkter på höger sida av behållaren. Läget START kapar början — tre punkter till vänster, synlig text till höger. MIDDLE kapar mitten och lämnar början och slutet av raden synliga. Läget MARQUEE — animerad rullning av text, där tre punkter inte visas och texten rullas cykliskt.

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

Viktigt: ellipsize fungerar endast i kombination med maxLines eller singleLine. Om du inte begränsar antalet rader kommer TextView att växa på höjden och ellipsize aktiveras inte. Från och med Android 8.0 (API 26) stöder ellipsize flerradsläge med maxLines > 1 — tre punkter placeras i slutet av den sista raden.

För programmeringsanrop, använd TextUtils.TruncateAt med ett av värdena: END, START, MIDDLE, MARQUEE. Värdet NONE stänger av ellipsize.

I praktiken passar END i 90% av fallen — användare förväntar sig att texten är kapad i slutet. MIDDLE används för filsökvägar (t.ex. "/User/.../project/main.kt") så att slutet av sökvägen är synligt. START — för namn med gemensamt prefix (t.ex. "...@gmail.com").

Textkapning på iOS: NSLineBreakMode

På iOS är motsvarigheten till ellipsize egenskapen lineBreakMode i klassen UILabel (och NSTextContainer för UITextView). Tre kappningslägen finns: .byTruncatingTail (slutet), .byTruncatingMiddle (mitten) och .byTruncatingHead (början).

Läget .byTruncatingTail motsvarar android:ellipsize="end". Läget .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Läget .byClipping — kapar text utan tre punkter, sällan använd i moderna gränssnitt. Läget .byCharWrapping — radbrytning per tecken utan kapning.

let label = UILabel()
label.text = "Lång text som inte får plats inom etikettens gränser"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString stöder också lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

I iOS fungerar truncation tillsammans med numberOfLines. Om numberOfLines = 1 kapas texten på en rad. Om numberOfLines = 2 — på den andra raden. UITextView använder NSTextContainer.lineBreakMode, som också stöder alla tre kappningslägen.

Egenskap för iOS: läget .byTruncatingMiddle på UILabel kan bete sig oväntat på korta rader — om raden ryms helt visas inte tre punkter. För garanterad visning av tre punkter på korta rader, använd anpassad logik via sizeThatFits.

CSS text-overflow: hur man gör tre punkter på webben

På webben implementeras ellipsize via CSS-egenskapen text-overflow: ellipsis i kombination med overflow: hidden och white-space: nowrap. Detta är standardsättet att kapa en rad med tre punkter i webbgränssnitt.

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

Egenskapen text-overflow fungerar inte utan overflow: hidden — webbläsaren måste veta att innehållet kapas. white-space: nowrap förbjuder radbrytning, annars kommer texten att gå till nästa rad och överflöde inträffar inte.

För flerradskapning (t.ex. 2 rader med tre punkter i slutet av den andra) användes tidigare den experimentella egenskapen -webkit-line-clamp, som nu har standardiserats som line-clamp i CSS Overflow Level 4.

I praktiken har text-overflow: ellipsis stötts av alla moderna webbläsare i över 10 år och är den mest tillförlitliga metoden för textkapning på webben.

Hur man väljer rätt kappningsläge

Valet av ellipsize-läge påverkar UX och kan både förbättra uppfattningen av gränssnittet och förvirra användaren. Huvudregel: användaren förväntar sig att den kapade delen finns där den är minst nödvändig för förståelse.

Läget END passar för rubriker, etiketter, namn — användaren ser början av raden och förstår sammanhanget. Tre punkter till höger betyder “det finns fortsättning, men den fick inte plats”. Detta är det mest intuitiva och utbredda läget.

Läget MIDDLE är oersättligt för filsökvägar, e-postadresser och långa identifikatorer. När slutet av raden innehåller unik information (filnamn, domän) bör användaren se just den, och början kan förkortas. Exempel: "/User/.../important_document.pdf" — omedelbart syns filnamnet.

Läget START används sällan, men är användbart för kontaktlistor med gemensamt prefix — till exempel "...@gmail.com" istället för "username@gmail.com", när alla adresser tillhör samma domän. Men detta mönster förvirrar oftare än det hjälper. Enligt Nielsen Norman Group läser användare från vänster till höger och förväntar sig viktig information i början, därför ökar START-kapning den kognitiva belastningen.

Läget MARQUEE (rullande text) är endast lämpligt för enradiga element med låg uppdateringsfrekvens: aktuellt spår i spelaren, nyhetsticker, statusrad. Använd inte marquee i tabeller, listor eller formulär — animation distraherar och försämrar prestanda på svaga enheter.

Typiska problem och deras lösningar

Första problemet — ellipsize fungerar inte. Oftast är orsaken avsaknaden av radbegränsning. Utan maxLines växer TextView på höjden och överflöde på bredden inträffar inte. Lösning: ange alltid maxLines (eller singleLine="true" för en rad).

Andra problemet — tre punkter visas inte vid programmeringsändring av text. Efter anrop av setText() kan TextView inte rita om sig korrekt. Lösning: anropa invalidate() eller post(() -> requestLayout()) efter ändring av text.

Tredje problemet — olika beteende på olika Android-versioner. Före API 23 stöddes ellipsize inte i flerradsläge (maxLines > 1). Lösning: för kompatibilitet, kontrollera Build.VERSION.SDK_INT och använd ViewCompat.setEllipsize() från AndroidX.

Fjärde problemet — symbolen för tre punkter visas inte i anpassade typsnitt. Om typsnittet inte innehåller glyfen U+2026 ersätts tre punkter med tre punkter. Lösning: kontrollera typsnittet förekomst av ellipsis-glyf eller lägg till ett reservtypsnitt via fontFamily.