Ellipsis Component

Text truncation utilities: single-line, multi-line, fadeout, reserved height, and cancel truncation.

Notes

Single line

.ellipsis

This is a long text that will be truncated with an ellipsis because its length exceeds the container width.

.ellipsis-1 (alias)

Same single-line truncation, different class name. Works identically to .ellipsis.

Real-world: file name + path

File: 2026_Q1_Financial_Report_Final_Approved.pdf
Path: /documents/finance/2026/Q1/reports/final/

Multi-line (.ellipsis-2 ~ .ellipsis-10)

2 lines

This is a two-line truncation demo. When text exceeds two lines, the rest is cut off and an ellipsis is shown. This keeps the layout tidy and is very useful for card summaries and article lists.

3 lines

Three-line truncation demo. Shows more content than two lines, suitable for longer previews. Ideal for blog excerpts, product descriptions, and news snippets where more context is needed.

4 lines

Four-line truncation demo. Provides substantial preview content. Good for blog articles, longer descriptions, or any scenario where you want to show a meaningful amount of text before the cut-off.

8 lines (example)

Eight-line truncation demo. The ellipsis component supports 2 to 10 lines, accommodating various layout needs. Choose the right line count to balance information display and space usage. For very long previews, 8 lines or more can be effective. This text is long enough to demonstrate the truncation at this line count.

Fadeout (.ellipsis-fadeout)

With 4 lines

Soft gradient fadeout mask at the bottom. Unlike the standard ellipsis, this creates a natural fading effect that looks more elegant. Combine with multi-line classes for both truncation and visual fade. Ideal for modern UI designs where a softer visual treatment is desired.

With 3 lines

Three-line fadeout effect. The text appears to fade out naturally at the bottom, creating a smoother visual experience compared to a hard ellipsis cut-off.

Reserve height (.ellipsis-reserve)

Short content with reserved height

Short text that doesn't fill 4 lines.

Short content without reserve (collapsed)

Short text — height collapses to actual content.

Reserve + fadeout

Even with short content, the container keeps 4-line height with fadeout effect. Useful for consistent card layouts.

Cancel (.ellipsis-none)

Truncated

This text is truncated at 2 lines. When text exceeds the limit, the rest is cut off and an ellipsis is shown.

With .ellipsis-none (full text)

This text also has ellipsis-2 but with ellipsis-none the truncation is cancelled. The full text is displayed, undoing the multi-line clamp. Useful for "expand full text" interactions.