text-overflow

text-overflow signals text clipped along a block container’s inline direction. It does not cause overflow or implement multiline truncation by itself.

Supply the three prerequisites

The block has a bounded width, nowrap, and hidden overflow. Ellipsis then marks the clipped end. Remove any prerequisite in the editor to see why the indicator changes.

<p class="label">Workshop registration for the afternoon session</p>

.label {
  width: 16ch;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5rem;
  background: #eff6ff;
}

Offer the full label through a native disclosure

The compact text is a visual convenience. Readers can open a keyboard-operable disclosure to read the complete label, so its availability does not depend on a hover tooltip or title attribute.

<p class="label">Workshop registration for the afternoon session</p>
<details>
  <summary>Read the complete label</summary>
  <p>Workshop registration for the afternoon session</p>
</details>

.label {
  max-width: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
summary {
  padding: 0.5rem 0;
}

Values and defaults

The initial value is clip and the property is not inherited. Clip paints no indicator. Ellipsis inserts a U+2026 ellipsis inside the content area when there is enough room. Custom strings and two-value edge syntax have separate compatibility histories; do not infer them from ellipsis support.

A single value applies at the line’s end according to direction. The property applies to block containers, so an ordinary inline span needs an appropriate box type. The ellipsis does not shorten the source text or remove it from the accessibility tree.

Common mistakes

Text overflowing below a fixed-height box is not covered by this property. Fade syntax belongs to newer specification work and is not a dependable replacement for the basic lesson. Multiline line-clamp has different prerequisites and support.

Title alone does not make full text conveniently available to keyboard or touch users. Keep essential instructions untruncated, or provide an explicit readable alternative. Learn overflow, white-space, and details.

Sources and browser support

MDN: text-overflow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.