CSS line clamp generator — cut text to a set number of lines with an ellipsis

How to use the CSS line clamp generator

1. Paste your own copy into Text, or keep the sample paragraph.
2. Set Maximum lines from 1 to 10.
3. Adjust Box width, Font size and Line height to match where the text will appear, and check where the ellipsis lands.
4. Copy the .clamp rule and add the class to the text element.

What it does and when to use it

Line clamping shows the first few lines of a longer text and ends with “…”. It keeps card grids tidy when descriptions differ in length: blog post teasers, product descriptions, comment previews, notification text and search results. Every card shows the same number of lines, so rows line up.

For a soft fade instead of a hard ellipsis, use the mask fade generator. To set comfortable font and line spacing for the text itself, try the typography styler, and to keep cards and their images in shape, the aspect ratio generator.

How it works

The rule turns the element into an old-style vertical flexible box, which is what -webkit-line-clamp needs, then limits it to your number of lines:

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

That is the output for 3 lines. MDN states that -webkit-line-clamp only works with display set to -webkit-box or -webkit-inline-box and -webkit-box-orient set to vertical. MDN lists the standard line-clamp property as limited availability, not Baseline, because it does not work in some widely used browsers.

Worked examples

Three-line teaser cards. Maximum lines 3 gives the rule above, ending with -webkit-line-clamp: 3; and line-clamp: 3;. The long sample paragraph is cut after its third line, which ends with an ellipsis.

A one-line title. Maximum lines 1 gives the same rule with 1, followed by:

/* Single line alternative */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Use either; the .truncate version needs the element to have a set width.

Limits and tips

• Do not set display yourself afterwards. Another display value, such as flex or block, switches the clamp off.
• Padding at the bottom can show part of the next line. Put padding on a wrapper instead of the clamped element.
• Do not clamp text people must read in full, such as prices, warnings or legal notes.