文字溢出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="w:40x overflow:hidden white-space:nowrap text-ellipsis">    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="min-w:0 overflow:hidden white-space:nowrap text-ellipsis">        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-ellipsis@sm text-clip@print">...</div>

Use line-clamp for multi-line truncation.