📖 Step 5: Design - Advanced UI/UX#143 / 291

Ellipsis

📖One-line summary

The "..." mark that signals text has been cut off.

Truncate long text with an ellipsis (…)

Single-line truncation:

This is a very long text. When it exceeds the screen width it is truncated automatically and shown with an ellipsis (…).

Two-line truncation:

This is a long multi-line text. Only two lines are shown and the rest is clipped. CSS's line-clamp lets you display only as many lines as you want.

Write a function that ellipsizes the middle of long filenames. Show 'very-long-filename.pdf' as 'very-lo...me.pdf'.

Build a component where overflowing text in a table cell is ellipsized and the full text appears on hover.

Try these prompts in your AI coding assistant!