✂️ line-clamp — Limiting Text to a Fixed Number of Lines in CSS

🌐 What is line-clamp?

line-clamp is a CSS property used to truncate text after a specific number of lines, adding an ellipsis (…) automatically. It’s perfect for cards, blog previews, product descriptions, and anywhere you want clean text snippets without JavaScript.

>>“line-clamp gives you multi-line text truncation with clean, effortless CSS.”

Note

✔ Fully supported in all modern browsers
✔ Works with block-level or flex items
✔ No JavaScript required

🎯 Why Use line-clamp?

  • Prevent text overflow in cards and components
  • Keep UI layouts consistent across variable content
  • Automatically apply ellipsis after N lines
  • Improve readability and aesthetics

🎯 Syntax

line-clamp Syntax

line-clamp: <number-of-lines>;

You typically combine it with:

  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • overflow: hidden;

Modern CSS now supports line-clamp without vendor prefixes in many browsers, but this structure ensures maximum compatibility.

🧪 Example 1 — Clamp to 2 Lines

Two-line Clamp

.text {
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

🧪 Example 2 — Clamp to 3 Lines

Three-line Clamp

.description {
  line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

🧪 Example 3 — Responsive line-clamp

Responsive Clamp

.card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
}

@media (min-width: 768px) {
  .card-text {
    line-clamp: 4;
  }
}

On small screens → 2 lines
On large screens → 4 lines

📐 How It Works Internally

  • Text is displayed normally until it reaches the specified line count
  • Anything beyond that is clipped
  • Ellipsis (…) appears automatically (browser-generated)
  • Requires overflow to be hidden

Note

🧠 line-clamp is shorthand for:max-lines: N; block-overflow: ellipsis;

🎨 Styling the Clamped Text

Styling Example

.title {
  font-size: 1.4rem;
  font-weight: 600;
  line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Useful for product cards, blog titles, etc.

🧱 Example — Clamping with Hover Expansion

Hover to Expand

.preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  transition: 0.3s;
}

.preview:hover {
  line-clamp: unset;
}

Hover removes the clamp — useful in dashboards.

⚠️ Common Mistakes

  • ❌ Forgetting display: -webkit-box; (clamping won't work)
  • ❌ Using line-clamp on inline elements (needs block or flex)
  • ❌ Not setting -webkit-box-orient (required for vertical clamping)
  • ❌ Expecting text to fade out — it clips with ellipsis instead

Note

💡 For fade-out effects → use mask-image instead of line-clamp.

🔥 Summary

line-clamp is a powerful and elegant tool for controlling text overflow in modern UI design. It makes multi-line truncation effortless, responsive, and visually clean, without relying on JavaScript.

>>“line-clamp is the secret to clean, balanced text layouts in modern interfaces.”

Learn more →MDN Docs 📘