Ellipsize in Mobile Development — What It Is and Ways to Truncate Text

What is Ellipsize?

Ellipsize (from ellipsis — a series of dots) is a technique for displaying text that exceeds the container size. Instead of simply clipping the line at the boundary, ellipsize adds an ellipsis character (three dots, Unicode U+2026), indicating to the user that there is hidden content.

The term is established in the Android SDK, where the android:ellipsize property defines the behavior of TextView on overflow. On iOS, the analogous functionality is called truncation and is managed via NSLineBreakMode. On the web, the CSS property text-overflow with the value ellipsis is used.

The main purpose of ellipsize is to inform the user that the text has been shortened. Unlike pixel-based clipping where a word can be broken in half, ellipsize guarantees readability: the ellipsis is placed after a whole word or character without breaking it. This aligns with the principles of Material Design and Human Interface Guidelines.

Use ellipsize wherever the container width is fixed and text length is dynamic: article headings, table cells, labeled buttons, contacts in a list, breadcrumbs, and file paths.

Ellipsize in Android: TextView and Modes

In Android, ellipsize is configured via the android:ellipsize attribute in XML or the setEllipsize() method in code. Four modes are available, each determining which side of the text will be truncated.

The END mode (default in most cases) truncates the end of the line and places the ellipsis on the right side of the container. The START mode truncates the beginning — ellipsis on the left, visible text on the right. MIDDLE truncates the middle, keeping the beginning and end of the line visible. The MARQUEE mode is an animated scrolling of text, where the ellipsis is not shown and the text scrolls cyclically.

<!-- 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 only works in combination with maxLines or singleLine. If the number of lines is not limited, the TextView will grow in height, and ellipsize will not activate. Since Android 8.0 (API 26), ellipsize supports multiline mode with maxLines > 1 — the ellipsis is placed at the end of the last line.

For programmatic use, call TextUtils.TruncateAt with one of the values: END, START, MIDDLE, MARQUEE. The value NONE disables ellipsize.

In practice, END is suitable for 90% of cases — users expect text to be truncated at the end. MIDDLE is used for file paths (e.g., "/User/.../project/main.kt") so the end of the path is visible. START is used for names with a common prefix (e.g., "...@gmail.com").

Text Truncation on iOS: NSLineBreakMode

On iOS, the equivalent of ellipsize is the lineBreakMode property of the UILabel class (and NSTextContainer for UITextView). Three truncation modes are available: .byTruncatingTail (end), .byTruncatingMiddle (middle), and .byTruncatingHead (beginning).

The .byTruncatingTail mode corresponds to android:ellipsize="end". .byTruncatingHead corresponds to START, .byTruncatingMiddle to MIDDLE. The .byClipping mode truncates text without an ellipsis, which is rarely used in modern interfaces. The .byCharWrapping mode wraps by characters without truncation.

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

In iOS, truncation works together with numberOfLines. If numberOfLines = 1, the text is truncated on a single line. If numberOfLines = 2 — on the second line. UITextView uses NSTextContainer.lineBreakMode, which also supports all three truncation modes.

iOS peculiarity: the .byTruncatingMiddle mode on UILabel can behave unexpectedly on short strings — if the string fits entirely, the ellipsis does not appear. For guaranteed display of the ellipsis on short strings, use custom logic via sizeThatFits.

CSS text-overflow: How to Add Ellipsis in Web

In web development, ellipsize is implemented via the CSS property text-overflow: ellipsis in combination with overflow: hidden and white-space: nowrap. This is the standard way to truncate a line with an ellipsis in web interfaces.

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

The text-overflow property does not work without overflow: hidden — the browser needs to know that content is being clipped. white-space: nowrap prevents line wrapping, otherwise the text would wrap to the next line and overflow would not occur.

For multi-line truncation (e.g., 2 lines with an ellipsis at the end of the second), the experimental -webkit-line-clamp property was previously used, which is now standardized as line-clamp in CSS Overflow Level 4.

In practice, text-overflow: ellipsis is supported by all modern browsers for over 10 years and is the most reliable way to truncate text on the web.

How to Choose the Right Truncation Mode

The choice of ellipsize mode affects UX and can either improve interface perception or confuse the user. The main rule: the user expects the truncated part to be where it is least needed for understanding.

The END mode is suitable for headings, captions, titles — the user sees the beginning of the line and understands the context. An ellipsis on the right means "there is more, but it did not fit." This is the most intuitive and common mode.

The MIDDLE mode is indispensable for file paths, email addresses, and long identifiers. When the end of the line contains unique information (file name, domain), the user should see that specifically, while the beginning can be shortened. Example: "/User/.../important_document.pdf" — the file name is immediately visible.

The START mode is rarely used but useful for a list of contacts with a common prefix — for example, "...@gmail.com" instead of "username@gmail.com" when all addresses belong to the same domain. However, this pattern often confuses more than it helps. According to the Nielsen Norman Group, users read from left to right and expect important information at the beginning, so START truncation increases cognitive load.

The MARQUEE mode (scrolling text) is only appropriate for single-line elements with low update frequency: the current track in a player, a news ticker, a status bar. Do not use marquee for tables, lists, or forms — animation is distracting and reduces performance on weak devices.

Common Problems and Their Solutions

The first problem — ellipsize does not work. Most often the cause is the absence of a line count limit. Without maxLines, the TextView grows in height and no width overflow occurs. Solution: always specify maxLines (or singleLine="true" for a single line).

The second problem — the ellipsis is not shown when text is changed programmatically. After calling setText(), the TextView may not redraw correctly. Solution: call invalidate() or post(() -> requestLayout()) after changing the text.

The third problem — different behavior on different Android versions. Before API 23, ellipsize in multiline mode (maxLines > 1) was not supported. Solution: for compatibility, check Build.VERSION.SDK_INT and use ViewCompat.setEllipsize() from AndroidX.

The fourth problem — the ellipsis character is not displayed in custom fonts. If the font does not contain the U+2026 glyph, the ellipsis is replaced by three dots. Solution: check the font for the presence of an ellipsis glyph or add a fallback font via fontFamily.