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

Truncate

📖One-line summary

Cutting long text off with "...".

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 CSS that truncates long text to 2 lines. Use -webkit-line-clamp, and on hover show the full text in a tooltip.

Build utility classes that truncate title to 1 line and description to 3 lines on a card component. Show an ellipsis (...).

Try these prompts in your AI coding assistant!