ellipsizing

Ellipsizing, or ellipsis truncation, is a typographic and user interface technique used to indicate that text has been shortened to fit within a fixed space. The method replaces the ending portion of the text with an ellipsis character (the horizontal ellipsis …, U+2026) or with three periods, signaling continuation. Ellipsizing is common in interfaces where space is limited, such as lists, tables, and buttons.

Common modes include tail ellipsis, which truncates the end and shows the beginning, and middle ellipsis, which removes a portion from the center to reveal the start and end. Most implementations apply to single-line text; multi-line ellipsis is more complex and varies by platform. When using a standard ellipsis, the visible text ends with the ellipsis and the remainder is hidden.

In web design, CSS text-overflow: ellipsis combined with overflow: hidden and white-space: nowrap produces a tail ellipsis for single-line blocks. For multi-line truncation, techniques such as -webkit-line-clamp or JavaScript-based solutions are used. Other platforms provide their own controls, such as UILabels on iOS or TextView on Android, which can be configured to truncate lengthwise with an ellipsis.

Accessibility and user experience considerations include ensuring that truncated content remains informative. Tooltips or accessible names (for example, aria-label in web contexts) can provide the full text to assistive technologies. Designers should avoid truncating critical information and consider word-boundary truncation or breathing room for readability.

Ellipsizing is a standard tool in typography and interface design, balancing legibility and space constraints. It is distinct from wrapping, which continues text onto new lines, and from expanding text to fit a space. See also text truncation, typography, and ellipsis characters.