CSS text-overflow Property

Definition and Usage

The text-overflow property sets how hidden overflow text is signaled in the inline direction—usually a hard cut (clip) or an ellipsis (ellipsis).

It does not create overflow by itself. Pair it with overflow (not visible) and, for a single line, white-space: nowrap. It is not inherited. The initial value is clip.

CSS Syntax

Study these Baseline keywords first. Custom strings and two-value forms are Limited—see the notes above.

Property Values

How to Use text-overflow

Create a single-line overflow first, then choose how to signal the cut.

1. Give the box a width (or max-width).
2. Set white-space: nowrap so the text stays on one line.
3. Set overflow: hidden (or scroll / auto—not visible).
4. Set text-overflow: ellipsis (or leave clip).

Live Preview

The sample already has overflow: hidden, white-space: nowrap, and a fixed width. Switch between clip and ellipsis.

CSS Examples

Each snippet keeps the CSS focused on text-overflow plus the two partners it needs. Use Try It Yourself for a live editor.

<style>
  p {
    width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<p>This is a very long label that will not fit.</p>

<style>
  p {
    width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
</style>

<p>This is a very long label that will not fit.</p>

<style>
  p {
    width: 12rem;
    white-space: nowrap;
    overflow: hidden;
  }

  .clip {
    text-overflow: clip;
  }

  .ellipsis {
    text-overflow: ellipsis;
  }
</style>

<p class="clip">This is a very long label that will not fit.</p>
<p class="ellipsis">This is a very long label that will not fit.</p>

Key Takeaways