CSS 'text-overflow' Property: Complete Reference

CSS `text-overflow` Property: Complete Reference

What Is `text-overflow`?

The text-overflow CSS property controls how overflowed content that is not displayed is signaled to users. It applies when text overflows its containing block (i.e., when the content is wider than the box) and only when the box has a computed overflow value of hidden, scroll, or auto and white-space: nowrap is set (or equivalent behavior like word-break: keep-all with a constrained width). In practice, it is most often used to truncate single‑line text with an ellipsis (…).

Why It Matters

In modern user interfaces, text often needs to fit into fixed‑width containers (e.g., table columns, card titles, navigation items, or button labels). Without text-overflow, overflowing text would either break the layout, cause horizontal scrollbars, or be clipped abruptly without any visual clue that content is missing. The property provides a clean, accessible way to indicate truncation, improving both aesthetics and usability.

Prevents layout breakage from long strings.
Communicates “more content exists” via an ellipsis or custom string.
Works seamlessly with overflow and white-space for predictable behavior.
Essential for responsive designs where container widths change.

How to Use It

Prerequisites

For text-overflow to take effect, the following three conditions must be met:

The element must have a width (or max-width / flex-basis) that constrains its content.
overflow must be set to hidden, scroll, or auto (typically hidden for truncation).
white-space must be nowrap to prevent line wrapping.

Basic Syntax

selector {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;      /* default – simply cuts off */
  text-overflow: ellipsis;  /* shows "..." at the end */
  text-overflow: "…";       /* custom string – limited browser support */
}

Values Explained

clip (default) – Text is simply cut off at the boundary of the content area. No visual indicator is added.
ellipsis – Displays an ellipsis character (…) at the point where text is truncated. This is the most widely used value.
<string> – A custom string (e.g., "…" or "[more]") can be used instead of the standard ellipsis. Note: Browser support for the custom string value is limited (mainly Firefox and Chrome). For cross‑browser reliability, stick with ellipsis.

Practical Code Example: Single‑Line Truncation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  .truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
    padding: 8px;
  }
</style>
</head>
<body>
  <div class="truncate">
    This is a very long text that will be truncated with an ellipsis because it exceeds the container width.
  </div>
</body>
</html>

Multi‑Line Truncation (Advanced)

text-overflow alone only works on a single line. For multi‑line truncation (e.g., clamping after three lines), use the CSS -webkit-line-clamp property in combination with overflow: hidden and display: -webkit-box. This is a non‑standard but widely supported technique:

.multi-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* works as a fallback for single-line */
  width: 300px;
}

Important: The -webkit-line-clamp approach automatically adds an ellipsis at the end of the last visible line. It does not require white-space: nowrap and respects line breaks and wrapping.

Best Practices

Always set a width (or a constrained flex/grid size). Without a defined width, the text may not overflow and text-overflow will have no visible effect.
Use ellipsis for maximum browser compatibility. The custom string value is not supported in Safari or older browsers.
Provide a tooltip or title attribute for truncated content so users can see the full text on hover:

<div class="truncate" title="This is the full, untruncated text.">
  This is the full, untruncated text.
</div>

Do not rely solely on visual truncation for critical information. Ensure that the full text is accessible to screen readers. The title attribute is a simple fix, but consider using aria-label or a hidden accessible element for more complex cases.
Avoid using overflow: hidden on interactive elements (like buttons or links) unless the truncation is deliberate and the full text is available elsewhere.
Combine with max-width for responsive layouts. Using percentage‑based widths or max-width makes truncation adapt to different viewports:

.responsive-truncate {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Conclusion

The text-overflow property is a small but powerful CSS tool for handling text that overflows its container. When combined with overflow: hidden and white-space: nowrap, it provides a clean, user‑friendly way to truncate single‑line content with an ellipsis. For multi‑line truncation, the -webkit-line-clamp approach fills the gap. By following best practices—always providing a fallback for accessibility, using ellipsis for broad support, and coupling truncation with tooltips—you can ensure that your interfaces remain both visually appealing and usable across all browsers and devices.