text-overflow
Choose the marker for clipped inline text in a constrained box.
Overview
| Class | Declarations |
|---|---|
text-clip | text-overflow: clip;
|
text-ellipsis | text-overflow: ellipsis;
|
text-overflow:<value> | text-overflow: <value>;
|
Examples
Clip overflowing inline text
text-clip selects a clipped edge with no ellipsis. It does not establish clipping: this example also supplies a block box, constrained width, nowrap and hidden overflow.
<!-- Clip marker · complete prerequisites --><span id="target" class="block overflow:hidden w:200px max-w:100% m:0 font-md leading:24px text-clip white-space:nowrap">quarterly-roadmap-final-version.pdf</span>Show an ellipsis
text-ellipsis paints an ellipsis when inline content overflows the clipped edge. The full filename remains in the DOM.
<!-- Ellipsis marker · identical width --><span id="target" class="block overflow:hidden w:200px max-w:100% m:0 font-md leading:24px text-ellipsis white-space:nowrap">quarterly-roadmap-final-version.pdf</span>Generated CSS
@layer utilities { .text-ellipsis { text-overflow: ellipsis } .overflow\:hidden { overflow: hidden } .white-space\:nowrap { white-space: nowrap }}Use in flex rows
When the clipping element is nested inside a flexible wrapper, set min-w:0 on that wrapper so it can shrink below its content width. Put the ellipsis on the nested block that actually clips the text.
<!-- Flexible wrapper · nested clipping --><div class="flex gap-sm w:240px max-w:100%"> <span class="flex:none font-sm">File</span> <div id="wrapper" class="flex:1 min-w:0"> <span id="target" class="block overflow:hidden font-md leading:24px text-ellipsis white-space:nowrap">quarterly-roadmap-final-version.pdf</span> </div></div>An element with scrollable overflow such as overflow:hidden can already have a zero automatic Flex minimum. The wrapper above has visible overflow, so its separate minimum is the constraint being removed.
Apply conditionally
The preview clips the same single line at the base viewport and adds an ellipsis at sm. Print restores wrapping and visible overflow so the filename is not truncated.
<!-- Clip · ellipsis · complete print text --><span id="target" class="block overflow:hidden w:200px max-w:100% m:0 font-md leading:24px text-clip white-space:nowrap overflow@print text-clip@print white-space:normal@print text-ellipsis@screen@sm">quarterly-roadmap-final-version.pdf</span>Use line-clamp for multi-line truncation.