CSS text-overflow Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-overflow property controls how inline content that extends beyond the element’s content box is visually represented at the clipped edge. It does not move or remove text from the DOM or change layout measurements; instead it alters only the rendering at the boundary where the text would otherwise overflow. Because its effect is purely visual, the underlying content remains intact for selection, copy/paste and many assistive technologies unless you take additional steps.

For text-overflow to take effect the containing box must prevent overflow from being visible, so it’s commonly used together with overflow and constrained widths. It is most straightforward on a single line of text, and its behavior on multi-line blocks can be more complex or require extra layout rules to produce a similar truncated appearance. Control of wrapping plays an important role too, which is why it is frequently combined with white-space settings to stop wrapping and create a predictable truncation point.

Practical uses include truncating long headings, labels, and table cells so they fit their containers without pushing layout out of bounds; it’s a standard tool in responsive UI patterns where space is limited. Keep in mind that because the property only affects visual rendering at the box edge, screen readers and copy operations may still expose the full text. When conveying critical information, provide an accessible fallback such as a tooltip or an exposed full-text element rather than relying on visual truncation alone.

Implementation considerations: the property applies to elements that establish a box context (for example block-level or table cell contexts), so it interacts with element formatting such as display. It also needs a definite constraint to produce consistent results, so pairing it with explicit width constraints like width or max-width is common. Finally, be aware that text rendering, punctuation at the cut point, and certain layout models or transforms can affect the visual outcome, so always test truncation across the target layouts to ensure it behaves as expected.

Definition

Initial value: clip
Applies to: Block containers
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.textOverflow

Interactive Demo

text-overflow: clip;

text-overflow: ellipsis;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

text-overflow: ( clip | ellipsis | <string> ){1,2} | inherit

Values

clipClip inline content that overflows. Characters may be only partially rendered.
ellipsisRender an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language/script-appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.
<string>Render the given string to represent clipped inline content. The given string is treated as an independent paragraph for bidi purposes.

Example

HTML

<div class="container">

  <h2>Text-overflow: ellipsis</h2>

  <div class="truncate" title="Full long text shown in tooltip">

    This is a very long piece of text that will overflow the container and get truncated with an ellipsis when it doesn't fit in one line.

  </div>

</div>

CSS

.container {
  max-width: 480px;
  margin: 24px;
  font-family: Arial, sans-serif;
}

.truncate {
  width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
  padding: 8px;
  background: #fafafa;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-overflow property. Hover over a browser icon to see the version that first introduced support for this CSS property.