text-overflow

Handling how hidden overflow content.

Overview

Examples

Clip overflowing inline text

Use text-clip when overflowing inline content should be cut off without an ellipsis.

<span class="text-clip">Long label</span>

Show an ellipsis

Use text-ellipsis with overflow:hidden, white-space:nowrap, and a constrained width.

<span class="overflow:hidden w:40x text-ellipsis white-space:nowrap">  quarterly-roadmap-final-version.pdf</span>

@layer utilities {  .text-ellipsis {    text-overflow: ellipsis  }  .overflow\:hidden {    overflow: hidden  }  .white-space\:nowrap {    white-space: nowrap  }  .w\:40x {    width: 10rem  }}

text-overflow only changes the marker at the clipped edge. It does not create clipping by itself.

Use in flex rows

In flex or grid children, add min-w:0 to the shrinking text region so the ellipsis can actually engage.

<div class="flex gap:sm">  <span class="flex:0">File</span>  <span class="overflow:hidden min-w:0 text-ellipsis white-space:nowrap">    quarterly-roadmap-final-version.pdf  </span></div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="text-clip text-clip@print text-ellipsis@sm">...</div>

Use line-clamp for multi-line truncation.