How CSS text-overflow: ellipsis Handles Truncated Text

The CSS text-overflow: ellipsis property provides a visual cue that text has exceeded its allocated container space by replacing the clipped content with a typographical ellipsis character (…). Rather than altering the underlying DOM string, it dictates visual rendering by clipping text characters that exceed the inline boundary and inserting the ellipsis where the overflow occurs. To function correctly, it requires strict layout constraints—specifically a clipped overflow and disabled text wrapping—to prevent the text from expanding the container or wrapping onto subsequent lines.

Required Prerequisites for Ellipsis Display

The text-overflow: ellipsis property cannot function in isolation. For the browser to recognize an overflow condition and render the ellipsis, three specific properties must be declared together on a block or inline-block container:

  1. overflow: hidden; (or clip): Constrains the content. Without this, the overflowing text renders outside the container boundaries, leaving no clipped boundary for the ellipsis to attach to.
  2. white-space: nowrap;: Forces the text string onto a single line. Without this, text naturally breaks into new lines instead of overflowing horizontally.
  3. text-overflow: ellipsis;: Instructs the rendering engine to render the … character (Unicode U+2026) in place of clipped inline content.
  4. Constrained Width: The element must have an explicit width, max-width, or be constrained by a parent container; otherwise, the element simply expands to fit the text.
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

How the Engine Renders the Ellipsis

When the layout engine calculates inline formatting, it measures the available width inside the element's content box. If the total width of the characters exceeds the boundary:

  • Character Clipping: The browser calculates how much space the ellipsis character requires. It then removes as many visible characters as necessary from the end of the text string to fit both the remaining text and the ellipsis within the available width.
  • Character-Level Truncation: Truncation occurs at the individual glyph level, not at word boundaries. If a word cannot fit entirely, it will be sliced mid-word to accommodate the ellipsis.
  • Padding and Borders: The ellipsis is placed inside the padding edge of the container. If the container has right padding, the ellipsis renders immediately before that padding space begins.

Accessibility and the DOM

The text-overflow: ellipsis property is strictly visual. It does not alter, delete, or modify the text node in the Document Object Model (DOM).

  • Screen Readers: Assistive technologies ignore the ellipsis and read the entire, unclipped string stored in the DOM.
  • Copy and Paste: When a user selects and copies the truncated text, the clipboard captures the complete text string, not the truncated version.
  • Tooltips: Because visually impaired or desktop users might not see the full content, it is standard practice to duplicate the full string inside an HTML title attribute or a custom tooltip to allow users to access the hidden content on hover.

Common Layout Issues and Solutions

Flexbox and Grid Containers

In modern CSS layouts, flex and grid items default to min-width: auto. This default setting prevents child items from shrinking below their content's natural size, effectively disabling text truncation. To allow text-overflow: ellipsis to work inside a flex or grid item, you must explicitly set min-width: 0 on the flex child.

.flex-item {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Multiline Truncation Limitations

The standard text-overflow: ellipsis property only operates on a single line of text. For multi-line text truncation, modern browsers rely on the CSS WebKit line-clamp module:

.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This alternative creates an ellipsis at the end of a specified number of lines rather than strictly clipping a single line horizontally.