CSS text-overflow Property

What You’ll Learn

The text-overflow property controls how overflowing text is shown — using clip or ellipsis when content exceeds its container.

Introduction

The text-overflow property in CSS is used to specify how overflowed content that is not displayed should be signaled to the user. It is particularly useful for handling overflow situations in text elements where the text content exceeds the container’s size.

This property can ensure that long text strings are handled gracefully, either by clipping them or by adding an ellipsis to indicate that the text is longer than the container.

Definition and Usage

Use text-overflow when text must stay inside a fixed-width box such as a sidebar link, table cell, or card title. For the common single-line ellipsis pattern, combine it with overflow: hidden; and white-space: nowrap;.

📝 Syntax

The syntax for the text-overflow property is simple and can be applied to block containers with overflowed content:

element {
  text-overflow: value;
}

Basic Example

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Syntax Rules

• text-overflow only affects overflow that is already hidden.
• Use ellipsis to show ... when text is truncated.
• Use clip to cut text off cleanly with no indicator.
• The property is not inherited; apply it to the truncating element itself.

Related Properties

• overflow — controls whether overflowing content is visible or hidden
• white-space — prevents wrapping for single-line truncation
• overflow-wrap — controls how long words break inside containers

🎯 Default Value

The default value of the text-overflow property is clip, meaning the overflowed text will be clipped without any visual indication that there is more text.

💎 Property Values

The text-overflow property accepts keyword values and, in some browsers, a custom string.

When to Use text-overflow

text-overflow is the right choice when long text must fit a constrained layout:

• Navigation menus — Truncate long page titles in sidebars.
• Card titles — Keep product or article names on one line.
• Tables — Prevent wide cell content from breaking table layout.
• Responsive UI — Maintain clean layouts on narrow screens.

Examples Gallery

In this example, we’ll use the text-overflow property to add an ellipsis to text that overflows its container.

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000;
  }
</style>

<h1>Text Overflow Example</h1>
<div class="container">
  This is a very long text that will not fit in the container.
</div>

.clip-box {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.sidebar-link {
  display: block;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

♿ Accessibility

• Provide full text elsewhere — Use a title attribute or expandable content so users can access truncated text.
• Do not hide critical info — Important words should not disappear entirely without another way to read them.
• Keyboard and screen readers — Truncation is visual; the full text may still be available to assistive tech in the DOM.
• Avoid over-truncation — Very short containers can make labels meaningless.

The ellipsis truncation recipe

text-overflow works only when overflow is hidden. For single-line truncation, combine it with overflow, white-space, and a width constraint.

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

💡 Best Practices