Text Overflow

When text is too long for its container, you often want to truncate it with an ellipsis (...) instead of letting it overflow or wrap awkwardly. The text-overflow property handles this. It is commonly used for navigation links, table cells, and card titles.

The Classic Truncation Pattern

text-overflow requires a specific set of properties to work. You need overflow: hidden, white-space: nowrap, and text-overflow: ellipsis together.

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

The text stays on one line, anything that overflows is hidden, and an ellipsis appears at the end. Without white-space: nowrap, the text would wrap instead of truncating.

Clip Value

text-overflow: clip truncates the text without an ellipsis. It just cuts it off at the edge. This is less common but useful when you do not want the visual indicator of truncated text.

.hard-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  max-width: 200px;
}
    

In practice, clip is rarely used because overflow: hidden already clips content. The ellipsis is usually preferred because it tells the user there is more text they are not seeing.

Multi-Line Truncation

The standard text-overflow only works for single lines. For multi-line truncation, you need the -webkit-line-clamp property, which is not part of the official spec but is widely supported.

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

This truncates text after 3 lines and adds an ellipsis. It is essential for card layouts and summaries where you want a consistent text height regardless of content length.