How To Use "Line Clamping" in Webflow

Uneven card text is one of those small Webflow design problems that makes a whole grid feel sloppy. Line clamping fixes it by cutting descriptions off after a set number of lines and adding an ellipsis.

What You'll Need

• A Webflow project with CMS collection cards (or any repeating text blocks)
• Access to Project Settings → Custom Code or a global stylesheet embed on your page templates

Why Line Clamping Matters

If you run a directory, job board, or marketplace, your listing cards probably pull descriptions from the CMS. Some listings have one line of copy. Others have five.

Without line clamping, card heights jump around and your grid looks broken — especially on mobile.

Line clamping lets you:

• Cap text at 2–3 lines with ... at the end
• Keep card heights consistent across breakpoints
• Stop manually trimming copy in the CMS

Step 1: Add the CSS Classes

Webflow doesn't ship native line-clamp controls, so you add a small CSS snippet. I usually put this in a site-wide embed called global-styles, but Project Settings → Custom Code → Head Code works too.

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

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

Change -webkit-line-clamp to however many lines you want. Create separate classes for 1-line, 2-line, and 3-line layouts so you can reuse them across templates.

Step 2: Apply the Class in the Designer

1. Select the text element inside your collection card (description, excerpt, or summary).
2. Add a combo class — e.g. text-style-2-lines.
3. Publish and check the live site.

The text cuts off after the second line and shows an ellipsis automatically. No manual line breaks required.

Where to Put the Code

Option A — Global stylesheet embed (best for larger sites)
Add one embed to your base template. Every page inherits the classes.

Option B — Project custom code
Paste the CSS into Project Settings → Custom Code. One setup, whole project covered.

Key Takeaways

• Line clamping keeps CMS card grids visually consistent
• -webkit-line-clamp + overflow: hidden is the standard approach
• Build reusable utility classes instead of one-off styles per card
• Works on collection cards, blog excerpts, marketplace listings, and any repeating text block